webpack5打包配置

近一段时间做了webpack的打包配置工作，从头到尾把打包配置又理了一遍，现在来记录一下。

前言

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。---来自官网的介绍

webpack打包配置能做些什么？

具体处理功能：

• css 处理

• html使用模版，且实现自动引入js、css等资源

• js的兼容性和压缩

• 代码格式化开发 .eslintrc.js

• 提升开发体验

• 打包构建速度

• 缓存

• 开发服务器自动化

1. 核心概念

• 入口entry：指定打包入口

• 输出output：指定打包后的文件输出到哪里，怎么命名

• 加载器loader：webpack本省只能处理js，json等资源，其他资源需要借助loader webpack 才能解析

• 插件plugins:扩展webpack的功能

• 模式mode: development , production

• 浏览器兼容性browser compatibility:webpack支持所有符合ES5标准的浏览器。webpack的import()需要Promise，如果你想要支持旧版本浏览器，在使用表达式之前，还需要提前加载polyfill。

2. css 处理

webpack不能处理样式资源，需要借助loader才能解析，这些loader配置在module.rules[]中，那css，styl需要哪些loader以及怎样配置？

2.1 css样式初步处理

下载：

npm i css-loader style-loader stylus-loader -D

配置

module:{
  rules[{
    test: /.css$/,
    use:["style-loader", "css-loader", "stylus-loader"]
  }]
}

其中， test用来表示需要匹配的内容，以.css结尾的文件， use数组表示使用的加载器loader是哪些，以及loader的配置，从右到左执行。

loader介绍: stylus-loader:将styl资源编译成css资源 css-loader：将css文件编译成commonjs模块化到js中;style-loader: 动态创建style标签，将js中的css引入到html中生效 注：其他的样式资源也是类似的配置，先转css再转style

2.2 css样式再处理-单独文件

随着后续项目增大，css资源增多，把这些文件都打入到一个js中，则js文件过大，可能会出现闪屏现在，用户体验不好，所以需要我们把文件打成单独的css，不再使用style-loader而是使用link标签引入资源来提高运行性能。

下载：

npm i mini-css-extract-plugin -D

配置：

const MiniCssExtractPlugin = require(''mini-css-extract-plugin")
module.exports = {
entry:xxx,
output: {path: xxx, filename:xxx},
module: {
  rules: [
    test: /.css$/,
    use:[MiniCssExtractPlugin.loader, css-loader, stylues-loader]
  ]
},
plugins: [
  new MiniCssExtractPlugin({filename: "static/css/main.css"})
]
}

其中， ①通过MiniCssExtractPlugin.loader可以使用link标签引入css ②使用MiniCssExtractPlugin插件，并配置css输出的路径以及文件名

2.3 css样式再处理-兼容性

css存在兼容性问题(eg:flex)，可通过Can I Use查看兼容性问题

下载：

npm i postcss-loader postcss postcss-preset-env

配置：

const MiniCssExtractPlugin = require(''mini-css-extract-plugin")
module.exports = {
entry:xxx,
output: {path: xxx, filename:xxx},
module: {
  rules: [
    test: /.css$/,
    use:[
      MiniCssExtractPlugin.loader,
      css-loader, 
      {
        loader: "postcss-loader",
        options: {
          postcssOptioins: {
            plugins: ["postcss-preset-env"]
          }
        }
      },
      stylues-loader]
  ]
},
plugins: [
  new MiniCssExtractPlugin({filename: "static/css/main.css"})
]
}

①postcss-loader 依赖于postcss ②postcss-preset-env智能预设，用来解决大多数兼容性问题。

2.4 css样式再处理-压缩

下载：

npm I css-minimizer-webpack-plugin -D

配置:

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
entry:xxx,
output: {path: xxx, filename:xxx},
module: {
  rules: [
    test: /.css$/,
    use:[
      MiniCssExtractPlugin.loader,
      css-loader, 
      {
        loader: "postcss-loader",
        options: {
          postcssOptioins: {
            plugins: ["postcss-preset-env"]
          }
        }
      },
      stylues-loader]
  ]
},
plugins: [
  new MiniCssExtractPlugin({filename: "static/css/main.css"})
],
optimization: {
  minimize: true,
  minimizer: {
    new CssMinimizerWebpackPlugin()
  }
}

①optimization 压缩和优化处理都会写在这里 ②css-minimizer-webpack-plugin用于压缩css资源

3. html 处理

3.1 html使用模版

每次都需要在html文件中自己手动写link引入css，比较繁琐，并且打包生产的html文件内容并非自己内容，这样处理 下载:

npm i html-webpack-plugin -D

配置：

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry:xxx,
output: {path: xxx, filename:xxx},
module: {
  rules: [
    ...
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "public/index.html")
  })
]

HtmlWebpackPlugin 会将public/index.html作为模版输出，并且自动引入打包生成的js css等资源

3.2 html压缩

生产环境下默认对html和js都进行了压缩

4. js处理

webpack只能编译js中ES模块化语法，不能编译其他语法，例如箭头函数，Promise，所以还要再做一些兼容性处理

4.1 js兼容性处理-babel

babel:将ES6语法编写的代码转换为向后兼容的js语法，使在旧浏览器上可以运行。 下载：

npm i babel-loader @babel/core @babel/preset-env -D

创建配置文件：  babel.config.js 配置babel.config.js：

module.exports = {
  presets: ["@babel/preset-env"]
}

①presets 一组babel插件，扩展babel功能 ②@babel/preset-env:智能预设，允许使用最新的JavaScript 配置webpack.config.js

module.exports = {
entry:xxx,
output: {path: xxx, filename:xxx},
module: {
  rules: [
 	 {
   	 test: /.js$/,
   	 exclude: /node_modules/,
   	 use:[loader: "babel-loader"]
 	 },				
	]
}

① exclude： 排除node_module不用编译 ② 使用babel-loader处理js兼容性问题

4.2 js兼容性处理-core-js

发现使用babel处理js的兼容性不够完善，它能够处理箭头函数，点点点运算符等，但是如果是async函数，promise对象，数组的便易方法等，它没有办法处理，一旦遇到低版本的浏览器还是会出现兼容性问题。 core-js是用来做ES6以上API的补丁(社区上提供的代码段) 下载：

npm i core-js -D

配置babel.config.js

module.exports = {
  presets: [
    "@babel/preset-env",
    { useBuiltIns: "usage", corejs: {version: "3", proposals: true }}
  ]
}

这样就会按照我们代码中使用的语法，自动按需引入相应的补丁了

4.3 babel处理兼容性后体积过大-runtime

babel对一些公共方法添加了辅助代码，默认会为每隔一需要他的文件都引入进去，导致项目多大，可以将这些辅助代码作为一个独立模块，避免重复引入。

@babel/plugin-transform-runtime禁用了babel对每个文件的runtime注入，而是通过@babel/plugin-transform-runtime从这里引用。

下载：

npm i @babel/plugin-transform-runtime -D

配置bable.config.js：

module.exports = {
  presets: [
    "@babel/preset-env",
    { useBuiltIns: "usage", corejs: {version: "3", proposals: true }}
  ],
  plugins: ["@babel/plugin-transform-runtime"]
}

4.4 js单独成文件&按需加载

将所有的js文件打包到一个文件中，体积太大了，如果我们只渲染首页，应该只加载首页的js，不应该把其他的也加进来。这样就需要把js按文件分割，生成多个js文件

Code Split主要做的两件事： ①分割文件：将打包生成的文件进行分割，生成多个js ②按需加载：需要哪个文件就加载哪个文件

分割文件

entry: xxx,
ouput: {...}
module: {...},
optimization: {
  minimize: true,
  minimizer: {
    splitChunks: {
      chunks: "all", // 对所有模块进行分割
    }
  }
}

动态导入&给动态导入文件命名

import (/* webpackChunkName: "detail" */ "./page/detail/detail.js")
.then((res)=> {
  console.log(res)
})
.catch(()=> {
  console.log("导入失败")
})

其中， webpackChunkName: "detail" 是webpack动态导入模块命名方式，"detail"会作为[name]的值显示

4.4 按需加载卡顿问题

使用Code Split技术按需加载也带了一定的问题，比如用户某个点击操作之后进行资源加载，此时网速不佳，资源过大，那么用户明显会感觉到卡顿的感觉，此时需要用到preload或是prefetch技术 preload：告知浏览器立即加载资源 prefetch：告知浏览器空闲时开始加载资源 共同点：仅加载，不执行，有缓存，但兼容性差 不同点：preload执行级别高于prefetch，preload只能加载当前页面资源，而prefetch可以加载下一个页面的资源 下载：

npm i @vue/preload-webpack-plugin -D

配置：

const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin")
module.exports = {
  ...
  plugins: [
      new PreloadWebpakcPlugin({
        rel: "preload",
        as: "script"
      })
  ]
}

4.5 引用函数库的某些方法

开发时会定义些工具库，如果没有做处理的话会将整个工具库引入进来，但实际上只用了极小的部分功能，这样打包进来体积太大，webpack默认开了一个功能Tree Shaking，用于移除js中没有用的代码，需要注意的是它依赖于ES Module

5. 代码格式化开发

Eslint 用来检测js的语法工具，使用Eslint关键是编写配置文件里面的各种rules规则，运行Eslint时就会以写的规则对代码进行检查。 编写配置.eslintrc.js

module.exports = {
  parserOptions:{
    ecmaVersion: 6, // ES 语法版本
    sourceType: "module", // ES 模块化
  },
  rules: {
    semi: "error", // 禁止使用分号
    eqeqeq: [
      'warn', // 强制使用 === 和 !==，否则警告
    ],
  },// rules 优先级别高于extends,三种级别off,warn,error
  extends: [],//继承其它规则
}

Eslint 官方的规则 Vue Cli官方规则 配置webpack.config.js

const EslintWebpackPlugin = require('eslint-webpack-plugin')
module.exports = {
  ...
  plugins:[
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, "src")
    })
]
}

import问题

在给js动态导入文件import(()=> ()).then().catch()，在eslint检查语法规范时是不合格的，所以我们需要再引入一个eslint插件

npm i eslint-plugin-import -D

配置：

module.exports = {
  parserOptions:{
    ecmaVersion: 6, // ES 语法版本
    sourceType: "module", // ES 模块化
  },
  plugins:["import"],// 解决动态导入import语法报错问题，实际使用eslint-plugin-import 的规则解决
  rules: {
    semi: "error", // 禁止使用分号
    eqeqeq: [
      'warn', // 强制使用 === 和 !==，否则警告
    ],
  },// rules 优先级别高于extends,三种级别off,warn,error
  extends: [],//继承其它规则
}

6. 提升开发体验

SourceMap（源代码映射）将生成的源代码与构建后代码的一一映射的文件，生成一个xxx.map文件，从构建后代码出错位置找到源代码出错的位置，从而让浏览器提示源代码文件出错的位置，帮助我们很快找到错误根源。配置

module.exports= {
  entry: xxx,
  output: {...}
  module: {...}
  devtool: "cheap-module-source-map"// 开发环境
  // devtool: "source-map"// 生产环境
}

7. 提升打包构建速度

7.1 HMR(HotModuleRelaceMent热模替换)

开始时如果修改了一个模块代码，webpack默认会将所有模块打包重新编译，速度较慢，所以如果修改某个模块代码，只打包改模块代码其他模块不变，这样打包速度就能快很多了。

HMR(热模替换)在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

css样式经过style-loader处理具备了HMR功能，如果是vue项目的话，使用vue-loader来解决HMR问题

7.2 OneOf

默认打包时每个文件都会经历所有的loader处理，即使已经匹配上了某一个loader，还要继续向下匹配，做了无用功。OneOf只要匹配上一个loader剩下的就不匹配了 配置

module.exports = {
  module: {
    rules:[
      { oneof: [{test: /.js$/,exclude: /node_module/,use["babel-loader"]},{}] },
      {}
    ]
  }
}

7.3 Include/Exclude(包含/排除)

include:包含哪些文件 exclude:排除哪些文件

7.4 Thread开始多进程

当项目越来越大时，打包速度也越来越慢，主要是js文件，而处理js有eslint, babel, terser三个工具，开启多进程处理js文件 注：如果项目比较大，适合开启多进程，因为每个进程启动需要大约600ms的开销 下载：

npm i thread-loader -D

配置

import os  = require("os")
const threads = os.cpus().length;
module.exports = {
...
  module: {
    rules:[
      { oneof: [
        {
          test: /.js$/,
          exclude: /node_module/,
          use[
              {loader: "babel-loader",options:{works:threads}},// 开启进程数量
           ]
        },
    ]
  }
}

以上以babel举例，具体如何配置，查看webpack官网配置即可。

8. 缓存

8.1 eslint，babel缓存

每次打包js都要经过eslint检查，babel编译，速度比较慢。如果缓存之前eslint检查，babel编译结果，那第二次打包速度将会更快 配置

import os  = require("os")
const threads = os.cpus().length;
module.exports = {
...
  module: {
    rules:[
      { oneof: [
        {
          test: /.js$/,
          exclude: /node_module/,
          use[
              { loader: "babel-loader",
                options:{
                  works:threads,
                  cacheDirectory: true,// 开启babel编译缓存
                  cacheCompress:false //缓存文件不要压缩
              }},// 开启进程数量
           ]
        },
    ]
  }
},
plugins:[
  new EslintWebpackPlugin({
     context: path.resolve(__dirname, "../src"),
     exclude: /node_module/,
     cache: true,//开启缓存
     cachelocation: path.resolve(__dirname, "../node_module/.cache/.eslintcache")
  })
]

8.2 Network Cache

将来开发时我们对静态资源会使用缓存来优化，这样浏览器第二次请求资源就能读取缓存了，速度很快。

但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新了。

所以我们从文件名入手，确保更新前后文件名不一样，这样就可以做缓存了。 它们都会生成一个唯一的 hash 值。

• fullhash 每次修改任何一个文件，所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。

• chunkhash 根据入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。js 和 css 是同一个引入，会共享一个 hash 值。

• contenthash 根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的。

filename: "static/js/[name].[contenthash:8].js"
chunkFilename: "static/js/[name].[contenthash:8].chunk.js" // 动态导入输出资源的命名方式

但是这样也会引发一个问题，修改了一个js文件，因为contenthash的原因，则相应的js文件名会改变，那和改js相依赖的文件也会发生变化。

这时需要把hash值单独保管在一个runtime文件中，如果A文件发生变化，最终修改的只是A文件和runtime，其他的保持不变。

// 提取runtime文件
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
    },

8.3 离线加载

一种类似原生应用程序的技术，在离线时应用程序能够继续运行。内部通过Service Workers技术实现，使用workbox-webpack-plugin 插件完成

9. 开发服务器自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，怎么一切自动化呢？

npm I webpack-dev-server -D

配置

devServer: {
  host: "localhost", // 启动服务器域名
  port: "3000", // 服务器端口号
  open: true // 自动打开浏览器
}

终端运行方式发生了变化

npx webpack --config ./config/webpack.dev.config

10. 完整版webpack.config.js配置

const os = require('os')
const path = require('path'); // node.js 核心模块，专门用来处理路径的
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require('terser-webpack-plugin')
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin')
const WorkBoxWebpackPlugin = require('workbox-webpack-plugin')

const threads = os.cpus().length;

const getStyleLoaders = (pre) => {
    return [ // loader: 'xxx' 只能处理一个loader，use可以处理多个loader
        // "style-loader", // 将js中css通过创建script标签添加html文件中生效
        MiniCssExtractPlugin.loader,
        "css-loader", // 将css资源编译成commonjs的模块到js中
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 能解决大多数样式兼容性问题
                    ],
                },
            },
        },
        pre
    ].filter(Boolean)
}

// webpack采用node.js运行，所以使用common.js模块化规范
module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径 是相对于根目录的路径
    // 输出
    output: {
        // __dirname 当前文件所在的文件夹目录
        path: path.resolve(__dirname, '../dist'), // 所有文件打包出来的目录，绝对路径，相对于当前文件夹的绝对路径
        filename: "static/js/[name].[contenthash:8].js", // 入口文件打包输出名
        chunkFilename: "static/js/[name].[contenthash:8].chunk.js", // 动态导入输出资源命名方式
        assetModuleFilename: "static/media/[name].[hash:10][ext]", // 动态导入图片字体等资源命名方式
        clean: true, // 打包前将dist目录清空再打包
    },
    // 加载器
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /.css$/, // 仅匹配css结尾的文件
                        use: getStyleLoaders(), // 由右向左
                    },
                    {
                        // less
                        test: /.less$/,
                        use: getStyleLoaders("less-loader"),
                    },
                    {
                        // stylus
                        test: /.styl$/,
                        use: getStyleLoaders("stylus-loader"), // compiles Styl to CSS
                    },
                    {
                        // 图片资源处理自定义 data URI 生成器
                        test: /.(png|jpe?g|gif|svg)/,
                        type: 'asset',
                        parser: { // 解析器
                            dataUrlCondition: {
                                maxSize: 10 * 1024 // 10kb
                            }
                        },
                        // generator: {
                        //     // 控制资源输出目录hash ext query (名字，扩展，参数) hash:10 文件名就取10位
                        //     filename: 'static/images/[hash:10][ext][query]'
                        // }
                    },
                    {
                        // 字体图标
                        test: /.(ttf|woff2?|mp3|mp4|avi)$/,
                        type: 'asset/resource', // 不会生成base64
                        // generator: {
                        //     // 控制资源输出目录hash ext query (名字，扩展，参数) hash:10 文件名就取10位
                        //     filename: 'static/media/[hash:10][ext][query]'
                        // }
                    },
                    {
                        test: /.js$/, // webpack只能处理es6，无法向兼容之前的js，所以要使用babel去兼容
                        // exclude: /node_modules/, // 排除node_modules，因为使用的三方已经向下兼容了
                        include: path.resolve(__dirname, '../src'),
                        // use: [{
                        //     loader: "babel-loader"
                        // }],
                        use: [
                            {
                                loader: "thread-loader",
                                options: {
                                    workers: threads,
                                }
                            },
                            {
                                loader: "babel-loader",
                                options: {
                                    cacheDirectory: true,
                                    cacheCompression: false
                                }
                        }]

                    }
                ]
            }
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src'), // 检查src下js语法规范
            exclude: 'node_modules',
            cache: true,
            cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),
            threads: true,
        }),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "static/css/[name].[contenthash:8].css",
            chunkFilename: "static/css/[name].[contenthash:8].css",
        }),
        new PreloadWebpackPlugin({
            rel: "Preload",
            as: "script",
        }),
        new WorkBoxWebpackPlugin.GenerateSW({
            clientsClaim: true,// 这些选项可以快速启动 ServicWorkers，不允许留任何旧的 ServiceWorkers
            skipWaiting: true,
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin({
                parallel: threads
            }),// terser是对js的压缩
            new CssMinimizerPlugin(),//css压缩
        ],
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                default: {
                    minSize: 0
                }
            }
        },
        runtimeChunk: {
            name: (entrypoint) => `runtime~${entrypoint.name}`, //runtime文件命名规则
        }
    },
    // 模式
    mode: "production",
    devtool: "source-map"
}

babel.config.js

module.exports = {
    presets: [
        '@babel/preset-env',
        // 按需加载core-js的polyfill
        { useBuiltIns: "usage", corejs: { version: "3", proposals: true } },
    ]
}

.eslintrc.js

module.exports = {
    // 继承 Eslint 规则
    extends: ["eslint:recommended"],
    env: {
        node: true, // 启用node中全局变量
        browser: true, // 启用浏览器中全局变量
    },
    parserOptions: {
        ecmaVersion: 6,
        sourceType: "module",
    },
    rules: {
        "no-var": 2, // 不能使用 var 定义变量
    },
};

后续再补充。。。