5.0 Vue中使用webpack

webpack的基本使用

1，什么是webpack？

概念：webpack是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性，性能优化等强大的功能。

好处：让程序员吧工作的中心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。

2，安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

3，在项目中配置webpack

① 在项目根目录中，创建名为 webpack.config.js的webpack配置文件，并初始化如下的基本配置：

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
  //mode 用来指定构建模式，可选值有 development 和 production
  // 开发时使用 development 打包速度快，体积大
  // 上线的时候使用 production 打包速度快， 体积小
  mode: 'development',
};

② 在package.json的script节点下，新增 dev 脚本如下：

  "scripts": {
    "dev": "webpack"
  }

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

运行之后会在项目中自动生成一个dist文件，我们后续只需要导入dist文件下的main.js文件即可

4，自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。
示例代码如下：

const path = require('path');
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
  //mode 用来指定构建模式，可选值有 development 和 production
  mode: 'development',
  // entry:'指定要处理那个文件'
  entry: path.join(__dirname, './src/index.js'),
  // output 指定生成的文件存放在哪里
  output: {
    // 存放目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'main.js',
  },
};

webpack中的插件

1，webpack插件的作用

常用插件：

1. webpack-dev-server
   - 类似于 node.js 的nodemon工具
   - 每当修改了源代码，webpack会自动进行项目的打包和构建
2. html-webpack-plugin
   - webpack中的HTML插件 (类似于一共模板引擎插件)
   - 可以通过此插件自定制 index.html 页面的内容

2，安装配置 webpack-dev-server

安装：
运行命令安装插件：npm install webpack-dev-server -D
webpack 4 以上我们还需要安装webpack-cli
npm install webpack-cli -D

配置：
① 新增 webpack.config.js 中的 devServer命令：

 // 监听文件改动，自动打包    //  watch: true,
    devServer: {
        static: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前路劲
        compress: true, // 压缩资源
        port: 9000, // 指定服务器的端口号
        open: 'Chrome', // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开
    }

webpack版本4以上的在package.json内配置如下

  "scripts": {
    "dev": "webpack",
    "dev-serve": "webpack serve"
  }

② 再次运行 npm run dev 命令，重新进行项目的打包

③ 在浏览器中访问 http://localhost:8080 地址查看自动打包效果
修改引入文件

***注意：webpack-dev-server 会启动一个实时打包的http服务器

3，安装 html-webpack-plugin

安装：
npm install html-webpack-plugin -D
配置：
① webpack.config.js文件中新增配置如下代码

const HtmlPlugin = require('html-webpack-plugin');// 导入  html-webpack-plugin 插件，得到插件的构造函数
// nwe 构造函数，创建插件的示例对象
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html', //指定要复制那个页面
  filename: './index.html', //指定复制出来的文件名和存放路径
});

② webpack.config.js文件module.exports中新增

module.exports = {
  // 插件的数组，将来webpack在运行时，会被加载并调用这些插件
  plugins: [htmlPlugin],
}

4，webpack 中的loader插件

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!
loader加载器的作用:协助webpack 打包处理特定的文件模块。比如:

• css-loader 可以打包处理.css相关的文件
• less-loader可以打包处理.less相关的文件
• babel-loader可以打包处理webpack无法处理的高级JS语法
  

Ⅰ，安装打包处理css文件
① 运行 npm i style-loader -D和npm i css-loader -D，安装处理css文件的loader
② 在wenpack.config.js的module -> rules数组中，添加loader规则如下

module:{	// 所有第三方文件模块的匹配规则
	rules:[	// 文件后缀名的匹配规则
		{test:/\.css$/,use:['style-loader','css-loader']}
	]
}

其中，test表示匹配的文件类型，use表示对应要调用的loader，顺序是固定的，多个loader的调用顺序是：从后往前调用。

Ⅱ，安装打包处理less文件

① 运行 npm i less-loader less -D命令
② 在webpack.config.js的 module ->rules数组中，添加loader规则如下：

module:{
	rules:[
		{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
	]
}

Ⅲ，安装打包处理样式表中url路径相关的文件
① 运行 npm i url-loader file-loader -D 命令
② 在webpack.config.js 的module ->rules 数组中，添加 loader规则如下：

module: {
    // 所有第三方文件模块的匹配规则
    rules: [
      // 文件后缀名的匹配规则
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' }],
  },

其中？之后的loader的参数项：limit用来指定图片的大小，单位是字节(byte)，只有<= limit大小的图片，才会被转化为base64格式的图片

Ⅳ，打包处理js文件中的高级语法
webpack 只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级JS语法，需要借助于 babel-loader进行打包处理。例如：

安装：npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
配置：
① 在 webpack.config.js的module ->rules 数组中，添加loader规则如下：

// 注意：必须使用exclude 指定特殊项，因为 node_modules 目录下的第三方包不需要被打包
{test:/\.js$/,use:'babel-loader',exclude:'/node_modules/'}

② 在项目根目录下，创建名为 babel.config.js 的配置文件，定义Babel的配置项如下：

module.exports={
// 声明 babel 可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

详情请参考Babel的官网

webpack打包发布

配置webpack的打包发布

在package.json文件的，scripts节点下，新增build命令如下：

"scripts":{
	"build":"webpack --mode production" 	//项目发布时，运行build命令
}

–mode 是一个参数项，用来指定webpack 的运行模式。production代表生产环境，进行代码压缩和性能优化。

注意：通过 --mode 指定的参数项，会覆盖 webpack.config.js 中的model 选项。

优化dist文件夹打包

① 吧JavaScript 文件统一生成到JS目录中
在webpack.config.js 配置文件的output节点中，进行如下的配置：

  output: {
    // 生成的文件名
    filename: 'js/bundle.js',
    // 存放目录
    path: path.join(__dirname, 'dist'),
  }

② 吧图片文件统一生成到 image 目录中
修改webpack.config.js中的module ->rules配置项，修改指定图片文件的输出路径：

      {
        test: /\.jpg|png|gif$/,
        use: 'url-loader?limit=22229&outputPath=images', //在配置多个参数之间，使用&符号进行分割
      },

③ 运行build命令时自动删除旧的dist文件夹
安装：npm install --save-dev clean-webpack-plugin
配置：在webpack.config.js文件中，新增 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
修改plugins数组内容 plugins: [htmlPlugin, new CleanWebpackPlugin()],

Source Map

1，什么是Source Map

Source Map 就是一个信息文件，里面储存着位置信息，也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
作用：出错的时候，除错工具将直接显示原始代码，而部署转换后的代码，能够极大的方便后期的调试。

开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数，与源代码的行数不一致的问题，示意图如下：

解决默认Source Map的问题

开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports = {
// 此配置生成的Source Map能够保证运行时报错的行数与源代码的行数保持一致
  devtool: 'eval-source-map',	//在发布项目时,出于安全考虑应禁用此行代码
}

另一种方式，只定位行数不暴漏源码

注意：在实际开发中我们并不需要自己配置 webpack

• 实际开发中会使用命令行工具(俗称 CLI )一键生成带有 webpack 的项目
• 开箱即用，所有webpack配置项都是现成的！
• 我们只需要知道webpack中的基本概念即可！

webpack中@的用法

在webpack.config.js中添加如下的配置

resolve: {
    alias: {
      // 告诉webpack，@符号表示src这一层目录
      '@': path.join(__dirname, './src/'),
    },
  },

在Chrome浏览器中安装vue_devtools调试工具

vue_devtools调试工具

点击详情，