webpack学习

学习视频：https://yk2012.github.io/sgg_webpack5/project/vue-cli.html

一、介绍和基本使用

1、webpack本身功能较少，只能处理js资源，一旦遇到css等其他资源会报错
2、基本使用：

• 创建js/count.js、js/sum.js、src/main.js

//js/count.js
export default function (a,b) {
  console.log(a+b);
}
//js/sum.js
export default function(...arg) {
  return arg.reduce((x,y) => x+y,0);
}
//src/main.js
import count from "../js/sum"
import sum from "../js/sum"
console.log(count(1,2));
console.log(sum(1,2,3,4,5));
1
2
3
4
5
6
7
8
9
10
11
12
13

• 创建public.index.html，引入src/main.js，直接在vscode中使用Live Server打开，控制台报错。（原因：浏览器不能识别ES6的模块化）
  
• 通过 npm init创建 package.json 文件，将main属性，修改为正确的入口js文件路径
  
• 通过npx webpack ./src/main.js --mode=development命令去打包，默认打包文件输出到根目录到dist文件夹里面。其中mode取值为development或者production，前者是在开发模式中打包编译，编译成浏览器能够识别的语法；后者是在生产环境下打包，会对代码进行压缩（命令中加上./src/main.js是要指明要打包的是哪一个文件 ）

二、基本配置

1、5大核心概念

• 1、entry（入口）
  可以配置一个或多个文件，指示webpack从哪个文件开始打包
• 2、output（输出）
  指示webpack打包完的文件输出到哪里去，如何命名等，有默认配置
• 3、loader（加载器）
  webpack本身只能处理js、json等资源，其他资源如scss、lass需要借助loader，webpack才能解析
• 4、plugins（插件）
  扩展webpack的功能
• mode（模式）
  主要有两种模式：
  开发模式：development
  生产模式：production（对代码进行各种优化）

//webpack.config.js
const path = require("path")//nodejs的核心模块，专门用来处理路径问题
module.exports = {
  //入口
  entry: "./src/main.js",
  //出口
  output: {
    //js文件的输出路径，其他文件如图片，需要在配置图片loader那边，通过gererator.name属性去配置
    //--dirname 是nodejs的变量，代表当前文件的文件夹目录
    //下面两句意思是，打包出来的所有文件及目录都放到 dist 目录下面，main.js 文件放到 dist/static/js 下面
    //这里的“dist”可以改为“dist/static/js”，下面的filename改为main.js，但是这样的话，打包出来的所有资源（如image、fonts）都会放到 “dist/static/js” 下面，
    path: path.resolve(__dirname, "dist"),
    //文件名
    //filename: "main.js"
    filename: "static/js/main.js"	//输出到dist/js/main.js中
  },
  //加载器
  module: {
    rules: [
      //loader的配置
    ]
  },
  //插件
  plugins: [
    //plugin的配置
  ],
  //模式
  mode: "development"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

使用该代码可以直接使用 npx webpack 打包，不需要在命令中指定入口文件。
注：代码、文件名不可输入，否则报错

三、处理css资源

npm install --save-dev css-loader
webpack仅支持处理js、json资源，如果 main.js 里面引入css，打包会报错，这就需要对应的loader去处理css资源。

• 创建 src/css/index.css文件
• 修改webpack.config.js中的加载器规则，过程是先把css资源编译成commonjs的模块到js中，然后把js中的css通过创建style标签的方法，添加到html中。

//webpack.config.js
//加载器
module: {
  rules: [
    //loader的配置
    {
      test: /\.css$/i,  //使用正则匹配.css后缀的文件
      //执行顺序：从右到左（从上到下）
      //loader: "",	//使用loader属性，只能配置一个loader
      use:[		//使用user属性，可以配置多个loader
        "style-loader", //将js中的css通过创建style标签的方式，添加到html中
        "css-loader"  //将css资源编译成commonjs的模块到js中
      ]
    }
  ]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• main.js里面引入对应src/css/index.css
  import "./css/index.css"
• 执行打包命令npx webpack
  

四、处理less资源

$ npm install less less-loader --save-dev
1

• 步骤跟三类似，只是把css文件换成了less文件，
• 修改webpack.config.js中的加载器规则

//webpack.config.js
//加载器
module: {
   rules: [
     //loader的配置
     {
       test: /\.css$/i,  //使用正则匹配.css后缀的文件
       //执行顺序：从右到左（从上到下）
       use:[
         "style-loader", //将js中的css通过创建style标签的方式，添加到html中
         "css-loader"  //将css资源编译成commonjs的模块到js中
       ]
     },
     {
       test: /\.less$/,
       use: [
         "style-loader",
         "css-loader",
         "less-loader" //将less编译成css文件
       ]
     }
   ]
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

五、其他loader

• sass-loader

$ npm install sass-loader sass webpack --save-dev
1

//webpack.config.js
{
  test: /\.s[ac]ss$/i,	//这里要匹配sass和scss
  use: [
    // 将 JS 字符串生成为 style 节点
    'style-loader',
    // 将 CSS 转化成 CommonJS 模块
    'css-loader',
    // 将 Sass 编译成 CSS
    'sass-loader',
  ],
},
1
2
3
4
5
6
7
8
9
10
11
12

• stylus-loader

$ npm install stylus stylus-loader --save-dev
1

//webpack.config.js
{
	test: /\.styl$/,
 	use: [
 		"style-loader",
 		"css-loader",
		"stylus-loader"	// 将 Stylus 文件编译为 CSS
	], 
},
1
2
3
4
5
6
7
8
9

六、处理图片资源 type: “asset”

webpack4的时候需要用url-loader去处理图片资源，webpack5只需要配置type: asset，其内部将使用url-loader去处理图片，不需要单独配置（当前使用5.72.0版本，不在webpage.config.js 中处理，打包出来的文件也将图片打包出来了，没有影响，教程评论提示不处理，部署上线可能存在问题，待验证）
css、sass、scss等资源中使用图片时，直接引入，在webpage.config.js中增加如下配置：

//webpack.config.js
{
  test: /\.(png|jpe?g|gif|webp|svg|jpg)$/,  //匹配多种后缀的图片
  type: "asset",
  parser: {
    dataUrlCondition: {
      //小于10kb的图片转化为base64
      //优点：减少请求数量。缺点：体积会变大
      maxSize: 10 * 1024  //10kb
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

上述代码中，小于10kb的图片，会被转化成base64，代码里直接引入base64的地址；大于64kb则直接复制新的图片至输入目录。

七、修改输出文件目录

• 修改输出的js目录
  output.filename 输出的是js的路径，调整目录，就在js文件名的前面添加目录名称即可

//webpack.config.js
output: {
  //js文件的输出路径
  //--dirname 是nodejs的变量，代表当前文件的文件夹目录
  //下面两句意思是，打包出来的所有文件及目录都放到 dist 目录下面，main.js 文件放到 dist/static/js 下面
  //这里的“dist”可以改为“dist/static/js”，下面的filename改为main.js，但是这样的话，打包出来的所有资源（如image、fonts）都会放到 “dist/static/js” 下面，
  path: path.resolve(__dirname, "dist"),
  //文件名
  filename: "static/js/main.js"
},
1
2
3
4
5
6
7
8
9
10

• 修改输出的image目录
  需要配置image loader中的generator.filename属性，/前面是路径，后面是图片名称，下面代码表示，所有图片，均输出到static/images目录下吗，名称为 hash.ext

//webpack.config.js
{
  test: /\.(png|jpe?g|gif|webp|svg|jpg)$/,  //匹配多种后缀的图片
  type: "asset", //asset 默认会把文件转成base64
  parser: {
    dataUrlCondition: {
      //小于10kb的图片转化为base64
      //优点：减少请求数量。缺点：体积会变大
      maxSize: 10 * 1024  //10kb
    }
  },
  generator: {
    //输出图片目录及名称
    //hash是原文件名，也叫图片id，是根据文件内容生成的，是唯一的
    //hash后面加 :10 表示取hash的前10位字符，这样就缩短了文件名，缩小的问文件体积
    //ext是文件扩展名
    //query是文件查询的参数，可写可不写
    filename: "static/images/[hash:10][ext][query]"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

八、自动清空上次打包的内容

在出口的配置中，设置clean: true

//webpack.config.js
//出口
output: {
  //js文件的输出路径
  //--dirname 是nodejs的变量，代表当前文件的文件夹目录
  path: path.resolve(__dirname, "dist"),
  //文件名
  filename: "js/main.js",
  //自动清空上次打包的内容
  //执行：在打包前，将path整个目录内容清空，在进行打包输出
  clean: true
},
1
2
3
4
5
6
7
8
9
10
11
12

九、处理字体图标资源

以 iconfont 为例：

• 下载图表库，将 iconfont.css 文件复制到项目目录的 css 目录中，将 iconfont.ttf、iconfont.woff、iconfont.woff2 文件复制到 css/fonts 目录中，修改 iconfont.css 中 @font-face 的src
• html中使用图标

<span class="iconfont icon-wodekanjia">span>
1

• main.js 中引入字体图标css

import "./css/iconfont.css"
1

• 配置字体图标

//webpack.config.js
//加载器
 module: {
   rules: [
     //loader的配置
     {
       test: /\.(ttf|woff2?)$/,
       type: "asset/resource", //asset/resource 不会把文件转成base64
       generator: {
         filename: "static/fonts/[hash][ext][query]"
       }
     }
   ]
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注：音视频这种的其他资源，也可以通过type:"asset/resource"处理，只需要将后缀加到 test 属性里面，然后 generator.filename 里面写上对应的路径/文件名即可。

十、处理js资源

webpack 对 js 的处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器中运行，所以我们希望做一些兼容性处理。

• 上面代码中，如果 src/main.js 或者 count.js、sum.js 中使用了剪头函数，或者其他 ES6+ 语法，打包出来的 dist/static/js/main.js 文件中，仍然是剪头函数，或者 ES6+ 语法，这种语法在高级浏览器中运行没有问题，但是在低级浏览器（如之前的IE）中，浏览器是无法识别运行的，所以还需要对 js 资源做一些处理。

其次，开发者，团队对代码格式有严格要求的，我们不能肉眼去检测代码格式，需要使用专业的工具来检测。

1. 针对 js 兼容性处理，使用 Babel 来完成
2. 针对代码格式，使用 Eslint 来完成（若无硬性要求，这一步其实可以不要，因为使用 Eslint 开发过程中，对格式要求极为严格，容易使代码报错，项目无法运行）

流程是：先完成 Eslint 检测代码格式无误后，再由 Babel 做代码兼容性处理。

十一、Babel

javascript编译器。
主要用于将ES6语法编写的代码转换为后向后兼容的javascript语法，以便能够运行在当前和旧版本的浏览器或其他环境。

1、配置文件

配置文件有多种写法

• babel.config.*新建文件，位于项目根目录
  · babel.config,js
  · babel.config.json
• babelrc.*新建文件，位于根目录
  · .babelrc
  · .babelrc.js
  · .babelrc.json
• packge.json和babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取他们，所以以上配置文件只需存在一个即可。

2、具体配置

$ npm install -D babel-loader @babel/core @babel/preset-env webpack
1

以babel.config.js配置文件为例：

module.exports = {
	presets: [],
}
1
2
3

1、presets预设
就是一组Babel插件，扩展Babel功能

• @babel/preset-env：一个智能预设，允许开发者使用最新的Javascript。
• @babel/preset-react：一个用来编译 React jsx 语法设置的预设
• @babel/preset-typescript：一个用来编译TypeScript的语法预设
  使用：

//webpack.config.js
{
  test: /\.js$/,
  exclude: /(node_modules)/,	//不处理node_modules目录下的文件
  loader: 'babel-loader',
  options: {
      presets: ['@babel/preset-env']
  }
}
1
2
3
4
5
6
7
8
9

或者将上述代码中的options去掉，新增babel.config.js文件，内容为：

module.exports = {
  presets: ['@babel/preset-env']
}
1
2
3

十二、plugin

1、处理html资源

上面的代码，是将打包出来的main.js文件，提前根据设置的输出路径，手动在 index.html 里面通过标签引入，才能正常使用 main.js 的代码，这样比较麻烦，如果是多个文件，还要手动去一一引入。所以这里用插件去处理：

$ npm install --save-dev html-webpack-plugin
1

//webpack.config.js
//插件
plugins: [
  //plugin的配置
  new HtmlWebpackPlugin({
    //模版：以public/index.html文件为基础，创建新的html文件，
    //该文件是在原文件的基础上，新增script标签，script否认路径是打包出来的js路径
    //新的html文件的特点：
    //1、机构和原来的一直。
    //2:自动引入打包输出的资源。
    //3：引入的资源是带有 defer 属性的。
    //defer是一部加载js，不阻塞dom解析，dom解析完成后执行js，多个defer会按顺序执行
    template: path.resolve(__dirname, "public/index.html"),
  })
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

原html文件：

打包输出的新的html文件：

十三、搭建开发服务器（webpack-dev-server）

$ npm install -D webpack-dev-server
1

注：如果是mac电脑，且在 vscode 的终端下载成功，但是查询 webpack -v 仍然显示 webpack-dev-server not installed 的情况下，可以试一下在 mac 的终端去执行该命令。

vscode终端下载完以后，查询版本显示：

mac终端下载完以后，查询版本显示：

//webpack.config.js
//模式
mode: "development",
//开发服务器：不会输出资源，在内存中编译打包
devServer: {
  host: "127.0.0.1",//启动服务器域名
  open: true, //启动服务器端口号
  port: 8000  //是否自动打开浏览器
},
1
2
3
4
5
6
7
8
9

启动命令npx webpack serve
或者在 package.json 的 scripts 里面配置命令"serve": "webpack-dev-server --mode development",，然后使用 npm run serve 启动。

以上功能相关代码见链接: https://pan.baidu.com/s/1cZuSpx1Le2xYDKTHNEe1ZQ?pwd=6pgi 提取码: 6pgi

十四、生产模式、开发模式webpack文件配置

• 根目录下创建config目录，将原 webpack.comfig.js文件复制两份到 config 里面，分别命名webpack.dev.js 、webpack.prod.js
• 修改webpack.dev.js的配置
  · 将文件中的绝对路径，改为相对路径（path、__dirname相关功能中的路径）
  · dev模式下，不需要输出文件，将 output.path 设置为 undefined
  · 不需要打包输出，所以将output.clean 去掉
  · mode设置为 "development"
  · 配置 devServer选项
  · 打包命令 npx webpack serve --config ./config/webpack.dev.js
• 修改webpack.prod.js的配置
  · 将文件中的绝对路径，改为相对路径（path、__dirname相关功能中的路径）
  · 需要输出文件，设置 path: path.resolve(__dirname, "../dist"),
  · 配置 output.clean=true 在打包输出目录前，先删除上一次打包的目录
  · mode 设置为production
  · 配置 devServer选项
  · 启动命令npx webpack --config ./config/webpack.prod.js

可以修改 packge.json 中的scripts配置，简化启动命令：

"scripts": {
   "start": "npm run dev", //这里实际执行的是下一行的命令
   "dev": "webpack serve --config ./config/webpack.dev.js",
   "build": "webpack --config ./config/webpack.prod.js"
},
1
2
3
4
5

其中，start 配置，可以使用 npm run start或者npm start启动，dev和build只能由 npm run XXX启动。

十五、css处理

1、提取css为单独的文件

css文件在此前是被打包到 js 文件中的，是通过js运行时，动态生成的 style标签
这样文件过大的话，会出现闪屏现象，用户体验不好
所以应该时单独的css文件，通过 link 标签加载性能才好（外链引入）

使用 mini-css-extract-plugin

$ npm install --save-dev mini-css-extract-plugin
1

修改 webpack.prod.js 文件：

//webpack.prod.js
//1、引入相关loader
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //引入插件
//2、将 module.ruls 中原来的 style-loader 替换为 MiniCssExtractPlugin.loader
//加载器
module: {
  rules: [
	{
	  test: /\.css$/i,  //使用正则匹配.css后缀的文件
	  //执行顺序：从右到左（从上到下）
	  use:[
	    // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
	    MiniCssExtractPlugin.loader, //将css提取成单独的文件
	    "css-loader"  //将css资源编译成commonjs的模块到js中
	  ]
	},
	{
	  test: /\.less$/,
	  use: [
	    // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
	    MiniCssExtractPlugin.loader, //将css提取成单独的文件
	    "css-loader",
	    "less-loader" //将less编译成css文件
	  ]
	},
  }
}
//3、将插件调用
plugins: [
	new MiniCssExtractPlugin({
	  filename: "static/css/main.css"//指定文件路径及名称，不指定默认输出到 dist/main.css
	})
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

提取前的引入：

提取后的引入：

2、css兼容性处理（postcss-loader）

部分低版本浏览器无法正确读取 css3 样式，这里可以自动处理其兼容性问题。

• 下载包

$ npm i postcss-loader postcss postcss-preset-env -D
1

• 修改 webpack.prod.js 文件中 css、less、scss loader
  配置项需要写在css-loader之后，less/sass-loader之前

//webpack.prod.js
//加载器
module: {
  rules: [
    //loader的配置
    {
      test: /\.css$/i,  //使用正则匹配.css后缀的文件
      //执行顺序：从右到左（从上到下）
      use:[
        // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
        MiniCssExtractPlugin.loader, //将css提取成单独的文件
        "css-loader",  //将css资源编译成commonjs的模块到js中
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [
                "postcss-preset-env",
                {
                  browsers: "last 2 versions"	//兼容浏览器最新的两个版本
                }
              ]
            }
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
        MiniCssExtractPlugin.loader, //将css提取成单独的文件
        "css-loader",
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [
                "postcss-preset-env"
              ]
            }
          }
        },
        "less-loader" //将less编译成css文件
      ]
    }
  ]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

• 修改 package.json 的 browserslist

 "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]
1
2
3
4
5

代码中是针对市面上 99% 的浏览器（不包括IE这种已经遗弃的浏览器）的最新的两个版本去做兼容处理。
打包后的css如下：

3、封装样式 loader 函数

将样式loader公共的内容提取出来

//webpack.prod.js
function getStyleLoader(pre){
  return [
    // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
    MiniCssExtractPlugin.loader, //将css提取成单独的文件
    "css-loader",  //将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env"
          ]
        }
      }
    },
    pre
  ].filter(Boolean)
}

//module.ruls里面调整
{
  test: /\.css$/i,  //使用正则匹配.css后缀的文件
  //执行顺序：从右到左（从上到下）
  use: getStyleLoader(),
  // use: [
  //   // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
  //   MiniCssExtractPlugin.loader, //将css提取成单独的文件
  //   "css-loader",
  //   {
  //     loader: "postcss-loader",
  //     options: {
  //       postcssOptions: {
  //         plugins: [
  //           "postcss-preset-env"
  //         ]
  //       }
  //     }
  //   }
  // ]
},
{
  test: /\.less$/,
  use: getStyleLoader("less-loader"),
  // use: [
  //   // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
  //   MiniCssExtractPlugin.loader, //将css提取成单独的文件
  //   "css-loader",
  //   {
  //     loader: "postcss-loader",
  //     options: {
  //       postcssOptions: {
  //         plugins: [
  //           "postcss-preset-env"
  //         ]
  //       }
  //     }
  //   },
  //   "less-loader" //将less编译成css文件
  // ]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

4、css压缩（MiniCssExtractPlugin）

$ npm install css-minimizer-webpack-plugin --save-dev
1

//1、引入插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//2、使用插件
plugins: [
	new CssMinimizerPlugin(), //压缩css文件
]
1
2
3
4
5
6

5、生产模式下，默认会把html、js文件进行压缩，不需要额外配置。

十六、基础总结

1、两种开发模式

• 开发模式：代码能编译自动化运行
• 生产模式：代码编译优化输出

2、webpack基本功能

• 开发模式：可以编译 ES Module 语法
• 生产模式：可以编译 ES Module 语法，压缩 js 代码

3、webpack配置文件

• 5个核心概念
  · entry：入口
  · output：出口
  · loader：加载器，处理css、图片、字体图标，js高级语法转换
  · plugin：插件，处理输出的文件内容、压缩css、将css输出到指定目录
  · mode：运行模式
  · devServer 配置开发模式下的 server

4、指令脚本用法

• webpack直接打包输出
• webpack serve期待开发服务器，内存编译打包，没有输出

相关代码：链接: https://pan.baidu.com/s/17w2z0vOYoYgvlCTF–2Lpg?pwd=j0kd 提取码: j0kd