webpack 5个核心基础概念（一篇掌握）

前言

webpack明明在各大脚手架中都配好了，个人想要自定义配置无疑费时费力，不过奈何面试总会问，还是要掌握一些基础，做个了解，针对5个核心基础概念entry（入口）、output（输出）、module（依赖loader）、plugins（插件）、mode（模式）进行一个基础记录。

依赖

1. 需要在项目中添加webpack和webpack-cli依赖。

2. 因为只在开发环境需要，因此-D。

   npm i webpack webpack-cli -D
   

3. package.json加入打包命令"build": "webpack"，在项目根目录执行yarn build或npm run build即可执行webpack打包。

     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       ...
       "build": "webpack"
     },
   

核心概念

1. 配置文件命名为webpack.config.js，我用的es的模块，其他模块同理。

2. 主要配置在config中，entry（入口）、output（输出）、module（依赖loader）、plugins（插件）、mode（模式）。

   const config = {
     entry: {
       main: './index.js',
       other: './other.js'
     },//或''或[]
     output: {
        filename: "[name].js",
     },
     module: {
       rules: [
         {
           test:...,
           use:...
         },
         {
           test:...,
           use:...
         },
       ],
     },
     plugins: [...],
     mode: "production",//或development
   };
   
   export default config;
   

1.entery（入口）

1. 可以填写三种形式：

   1. 对象，键值对指明入口地址，属性为名称，在出口output中可以用[name]获取属性名。

      entry: {
        main: "./index.js",
        other: "./other.js"
      },
      

   2. 字符串，单个入口可以直接用字符串填写入口路径，名称默认为main。

      entry: './index.js'
      

      等同于

      entry: {
       main: "./index.js",
      },
      

   3. 数组，与对象一样可以多入口，就是数组无法区分名称。

      entry:  ['./index.js','./other.js']
      

2. 使用对象形式时，可以对单个入口进行一些配置修饰，需要将地址再嵌套进一层对象，并在对象中加入属性进行配置。
   -dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
   -filename: 指定要输出的文件名称。
   -import: 启动时需加载的模块。
   -library: 指定 library 选项，为当前 entry 构建一个 library。
   -runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
   -publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。

   entry: {
    main: {
      import: "./index.js",             
    },
    other: {
      dependOn: 'main',
      import: "./other.js",
    },
   }
   

2.output（输出）

1. 对象类型，属性filename决定打包后的文件名。

      output: {
        filename:'bundle.js'
      }
   

2. 打包多个文件，但是仍然只能配置一个filename，入口如果是对象形式存在命名，可以使用[name]。

      output: {
        filename:'[name].js'
      }
   

3. path指定打包文件夹，不指定的话默认打包到dist文件夹

   import path from "path";
   const __dirname = path.resolve();
   ...
   
      output: {
        path: __dirname + "/otherName",
        filename:'[name].js'
      }
   

4. [contenthash]可以在名称中添加哈希随机数。

      output: {
        filename:'[name]-[contenthash].js'
      }
   

3.module（依赖loader）

1. 因为webpack默认只能打包js文件，无法识别其他文件（css、ts、less等等），module属性允许你添加loader处理不同的其他文件。
2. 每个loader都得单独下载依赖，例如css。

   npm i  css-loader -D
   

3. module，对象格式，rules属性是数组格式，里面每个对象两个属性test与use，test正则匹配文件名，use填写对应的loader。

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

4. 可以写成对象形式，好处是可以添加options对应loader的配置，至于有哪些内容要查相关文档。

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

5. use可以配置成数组，意思是对一种文件要使用多种loader处理，注意，顺序是从下至上开始，下面例子先执行css-loader、再执行style-loader。

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

4.plugins（插件）

1. loader无法处理所有的事，因此我们需要各种插件完成剩下的一些功能。
2. 例子，例如打包和压缩处理html文件。

   npm i  html-webpack-plugin -D
   

   import webpack from "webpack";
   import HtmlWebpackPlugin from "html-webpack-plugin";
   ...
   
     plugins: [
      new webpack.ProgressPlugin(),
      new HtmlWebpackPlugin({ template: "./index.html" }),
     ],
   

5.mode（模式）

1. 可选值有none、development、production（默认），一般只用到后两种。
2. development开发模式打包后会存在一些webpack注释，用于开发时使用。（会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名）
3. production生产模式，打包内容很干净。（会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin ）