【打包工具】Webpack4

menghen113

已于 2023-03-16 10:05:52 修改

阅读量309

点赞数 1

分类专栏：前端学习文章标签： javascript webpack 前端

于 2023-03-15 15:38:56 首次发布

本文链接：https://blog.csdn.net/menghen113/article/details/129555111

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频

第一章：Webpack 简介

1.1 Webpack是什么

Webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler).

在 Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理.

他将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)

在这里插入图片描述

1.2 Webpack 五个核心概念

1.2.1 Entry

入口(Entry)指示Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2.2 Output

输出(Output)只是 Webpack 打包后的资源 bundles 输出到哪里去，以及如何命名

1.2.3 Loader

Loader 让 Webpack能够去处理哪些非 JavaScript 文件（webpack 自身只理解 JavaScript）

1.2.4 Plugins

插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

1.2.5 Mode

模式（Model）只是Webpack使用想要模式的配置

选项	描述	特点
development	会将 process.env.NODE_ENV的值设为 development	能让代码本地调试运行的环境
production	会将 process.env.NODE_ENV的值设为 production	能让代码优化上线运行的环境

03.打包样式资源

npm init
npm install webpack@4.41.6 webpack-cli@3.3.11 -D
npm i css-loader@3.4.2 style-loader@1.1.3 -D

webpack

 npm i less-loader@5.0.0 -D
 
 npm i less@3.11.1 -D

04.打包html资源

npm i html-webpack-plugin@3.2.0 -D

05.打包图片资源

 npm i url-loader@3.0.0 file-loader@5.0.2 
-D

 npm i html-loader@0.5.5 -D

07.devServer

npm i webpack-dev-server@3.10.3 -D

npx webpack-dev-server

09.提取css成单独文件

 npm i mini-css-extract-plugin@0.9.0 -D

10.css兼容性处理

 npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D

11.css压缩

npm i optimize-css-assets-webpack-plugin@5.0.3 -D

12.语法检查

npm i eslint@6.8.0  eslint-loader@3.0.3  eslint-plugin-import@2.20.1  eslint-config-airbnb-base@14.0.0  -D

13.js兼容性处理

npm i babel@6.23.0 @babel/core@7.8.4 babel-loader@8.0.6 @babel/preset-env -D

npm i @babel/polyfill@7.8.3      (可忽略)


npm i core-js@3.6.4 -D

27.pwa

npm i workbox-webpack-plugibpack> n@5.0.0 -D

28.多进程打包

 npm i thread-loader@2.1.3 -D

30.dll

npm i add-asset-html-webpack-plugin@3.1.3 -D

第二章：Webpack开发环境配置

打包样式资源

/**
 * webpack.config.js webpack的配置文件
 *  作用：只是 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
 * 
 * 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
 */

//resolve用来凭借绝对路径的方法
const { resolve } = require('path');

module.exports={
  //webpack配置
  //入口起点
  entry:'./src/index.js',
  //输出
  output:{
    //输出文件名
    filename:'built.js',
    //输出路径
    //__dirname nodejs的变量，代表当前文件的目录绝对路径
    path:resolve(__dirname,'build')
  },
  //loader的配置
  module:{
    rules:[
      //详细loader配置
      //不同文件必须配置不同loader处理
      {
        //匹配哪些文件
        test:/\.css$/,
        //使用哪些loader进行处理
        use:[
          //use 数组中loader执行顺序：从右想左，从下往上依次执行
          //创建 style标签，将js 中样式资源插入进行，添加到head中生效
          'style-loader',
          //将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test:/\.less$/,
        use:[
          'style-loader',
          'css-loader',
          //将less文件编译成css文件
          //需要下载 less-loder和less
          'less-loader'
        ]
      }
    ]
  },
  //plugins的配置
  plugins:[
    //详细plugins的配置
  ],
  //模式
  mode:'development',//开发模式
  // mode:'production'

}

打包html资源

/**
 * loader:1.下载  2.使用(配置loader)
 * plugins:1.下载 2.引入  3.使用
 */
const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      //loader的配置
    ]
  },
  plugins:[
    //plugins的配置
    //html-webpack-plugin
    //功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    //需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      //复制 './src/index.html'文件，并自动引入打包输出的所有资源(JS/CSS)
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

打包图片资源


const {resolve} = require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.less$/,
        use:[
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        //问题：默认处理不了html中img图片
        //处理图片资源
        test:/\.(jpg|png|gif)$/,
        //使用一个loader
        //下载 url-loader file-loader
        loader:'url-loader',
        options:{
          //图片大小小于8kb，就会被base64处理
          //优点：减少请求数量（减轻服务器压力）
          //缺点：图片体积会变大（文件请求速度更慢）
          limit:8*1024,
          //问题：因为url-loader默认使用es6模块化进行解析，而html-loader引入图片是commonjs
          //解析时会出问题，[Object Module]
          //解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule:false,
          //给图片进行重命名
          //[hash:10]去图片的hash的前10位
          //[ext]取文件原来扩展名
          name:'[hash:10].[ext]'
        }
      },
      {
        test:/\.html$/,
        //处理html文件的img图片（复制引入img,从而能被url-loader进行处理）
        loader:'html-loader'
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

打包其他资源

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      //打包其他资源（处理html/js/css资源以外的资源）
      {
        //排除css/js/html资源
        exclude:/\.(css|js|html)$/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

devServer

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      //打包其他资源（处理html/js/css资源以外的资源）
      {
        //排除css/js/html资源
        exclude:/\.(css|js|html)$/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development',

  //开发服务器 devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~~）
  //特点：只会在内存中编译打包，不会有任何输出
  //起点devServer指令为：npx webpack-dev-server 因为没有全局安装，所以才能用npx
  devServer:{
    //项目构建后路径
    contentBase:resolve(__dirname,'build'),
    //起点gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
  }
}

开发环境配置

/**
 * 开发环境配置：能让代码运行
 * 运行项目指令：
 * webpack 会将打包结果输出出去
 * npx webpack-dev-server 只会在内存中编译打包，没有输出
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve}=require('path');

module.exports={
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      //loader的配置
      {
        //处理less资源
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
      },
      {
        //处理less资源
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        //处理图片资源
        test:/\.(jpg|png|gif)$/,
        loader:'url-loader',
        options:{
          limit:8*1024,
          name:'[hash:10].[ext]',
          //关闭es6模块化
          esModule:false,
          outputPath:'imgs'
        }
      },
      {
        //处理html中img资源
        test:/\.html$/,
        loader:'html-loader'
      },
      {
        //处理其他资源
        exclude:/\.(html|js|css|less|png|gif|jpg)/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]',
          outputPath:'media'
        }
      }
    ]
  },
  plugins:[
    //plugins的配置
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development',
  devServer:{
    contentBase:resolve(__dirname,'build'),
    compress:true,
    port:3000,
    open:true
  }
}

第三章：Webpack生产环境配置

提取css成单独文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve}=require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports={
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          //创建style标签，将样式放入
          // 'style-loader',
          //这个loader取代style-loader.作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          //将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
      //对输出的css文件进行重命名
      filename:'css/built.css'
    })
  ],
  mode:'development'
}

css兼容性处理

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve}=require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//设置nodejs环境变量
// process.env.NODE_ENV = 'development'

module.exports={
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          MiniCssExtractPlugin.loader,
          'css-loader',
          /**
           * css兼容性处理：postcss --> postcss-loader postcss-preset-env
           * 
           * 帮postcss找到package.json中browserlist里面的配置，通过配置加载指定的css兼容性样式
           * 
           *   "browserslist":{
           *      //开发环境-->设置node环境变量：process.env.NODE_ENV = development
                  "development":[
                    "last 1 chrome version",
                    "last 1 firefox version",
                    "last 1 safari version"
                  ],
                  //生成环境：默认是看生成环境
                  "production":[
                    ">0.2%",
                    "not dead",
                    "not op_mini all"
                  ]
                }
           */
          //使用loader的默认位置
          //'postcss-loader'，
          //修改loader的配置
          {
            loader:'postcss-loader',
            options:{
              ident:'postcss',
              plugins:()=>[
                //postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename:'css/built.css'
    })
  ],
  mode:'development'
}

压缩css

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve}=require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//设置nodejs环境变量
// process.env.NODE_ENV = 'development'

//optimize-css-assets-webpack-plugin

module.exports={
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader:'postcss-loader',
            options:{
              ident:'postcss',
              plugins:()=>[
                //postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename:'css/built.css'
    }),
    //压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode:'development'
}

js语法检查

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      /**
       * 语法检查：eslint-loader eslint
       *  注意：只检查自己写的源代码，第三方是不用检查的
       *  设置检查规则：
       *    package.json中eslintConfig中设置~
                * "eslintConfig": {
              "extends": "airbnb-base"
            }
       *    airbnb  --> eslint-config-airbnb-base eslint-plugin-import  eslint
       *
       */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true,
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

js兼容性处理

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
     /*
      js兼容性处理：babel-loader @babel/core @babel/preset-env
        1.基本js兼容性处理 --> @babel/preset-env
          问题：只能转换基本语法，如promise不能转换
        2.全部js兼容性处理 --> @babel/polyfill
          问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
        3.需要做兼容性处理的就做：按需加载 -->corejs

     */
    {
      test:/\.js$/,
      exclude:/node_modules/,
      loader:'babel-loader',
      options:{
        //预设：指示babel做怎么样的兼容性处理
        presets:[
          [
            '@babel/preset-env',
            {
              //按需加载
              useBuiltIns:'usage',
              //指定core-js版本
              corejs:{
                version:3
              },
              //指定兼容性做到版本浏览器
              targets:{
                chrome:'60',
                firefox:'60',
                ie:'9',
                safari:'10',
                edge:'17'
              }
            }
          ]

        ]
      }
    }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

js压缩

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  //生成环境下会自动压缩js代码
  mode: 'production',
};

html压缩

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      //压缩html代码
      minify:{
        //移除空格
        collapseWhitespace:true,
        //移除注释
        removeComments:true
      }
    }),
  ],
  mode: 'production',
};

生产环境配置

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

//定义nodejs环境变量：绝对使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

//复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    //还需要在package.json中定义browserlist
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:()=>[
          require('postcss-preset-env')()
        ]
      }
    }
]

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[...commonCssLoader]
      },
      {
        test:/\.less$/,
        use:[...commonCssLoader,'less-loader']
      },
      /**
       * 正常来讲，一个文件只能被一个loader处理
       * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
       *  先执行eslint 再执行bebel
       */
      {
        //在package.json中eslintConfig --> airbnb
        test:/\.js$/,
        exclude:/node_modules/,
        //优先执行
        enforce:'pre',
        loader:'eslint-loader',
        options:{
          fix:true
        }
      },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        options:{
          presets:[
            [
              '@babel/preset-env',
              {
                useBuiltIns:'usage',
                corejs:{version:3},
                targets:{
                  chrome:'60',
                  firefox:'50'
                }
              }
            ]
          ]
        }
      },
      {
        test:/\.(jpg|png|gif)/,
        loader:'url-loader',
        options:{
          limit:8*1024,
          name:'[hash:10].[ext]',
          outputPath:'imgs',
          esModule:false
        }
      },
      {
        test:/\.html$/,
        loader:'html-loader'
      },
      {
        exclude:/\.(js|css|less|html|jpg|png|gif)/,
        loader:'file-loader',
        options:{
          outputPath:'media'
        }
      }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename:'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  mode:'production'
}

第四章：Webpack优化环境配置

优化配置介绍

## webpack 性能优化

- 开发环境性能优化
- 生产环境性能优化

## 开发环境性能优化

- 优化打包构建速度
- 优化代码调试

## 生产环境性能优化

- 优化打包构建速度
- 优化代码运行的性能

HMR

/**
 * HMR:hot module replacement 热模块替换/模块热替换
 * 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
 *  极大提升构建速度
 * 
 * 样式文件：可以使用HRM功能，因为style-loader内部实现了~
 * 
 * js文件：默认不能使用HRM功能 --> 需要修改js代码，添加支持HMR功能的代码
 *  注意：HMR功能对js的处理，只能处理非入口js文件的其他文件
 * 
 * html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了~（不用做HMR功能）
 *  解决：修改entry入口,将html文件引入
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve}=require('path');

module.exports={
  entry:['./src/js/index.js','./src/index.html'],
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      //loader的配置
      {
        //处理less资源
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
      },
      {
        //处理less资源
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        //处理图片资源
        test:/\.(jpg|png|gif)$/,
        loader:'url-loader',
        options:{
          limit:8*1024,
          name:'[hash:10].[ext]',
          //关闭es6模块化
          esModule:false,
          outputPath:'imgs'
        }
      },
      {
        //处理html中img资源
        test:/\.html$/,
        loader:'html-loader'
      },
      {
        //处理其他资源
        exclude:/\.(html|js|css|less|png|gif|jpg)/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]',
          outputPath:'media'
        }
      }
    ]
  },
  plugins:[
    //plugins的配置
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development',
  devServer:{
    contentBase:resolve(__dirname,'build'),
    compress:true,
    port:3000,
    open:true,
    //开启HMR功能
    //当修改了webpack配置，新配置要想生效，必须重启webpack服务
    hot:true
  }
}

source-map


const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve}=require('path');

module.exports={
  entry:['./src/js/index.js','./src/index.html'],
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      //loader的配置
      {
        //处理less资源
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
      },
      {
        //处理less资源
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        //处理图片资源
        test:/\.(jpg|png|gif)$/,
        loader:'url-loader',
        options:{
          limit:8*1024,
          name:'[hash:10].[ext]',
          //关闭es6模块化
          esModule:false,
          outputPath:'imgs'
        }
      },
      {
        //处理html中img资源
        test:/\.html$/,
        loader:'html-loader'
      },
      {
        //处理其他资源
        exclude:/\.(html|js|css|less|png|gif|jpg)/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]',
          outputPath:'media'
        }
      }
    ]
  },
  plugins:[
    //plugins的配置
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development',
  devServer:{
    contentBase:resolve(__dirname,'build'),
    compress:true,
    port:3000,
    open:true,
    //开启HMR功能
    //当修改了webpack配置，新配置要想生效，必须重启webpack服务
    hot:true
  },
  devtool:'eval-source-map'
}

/**
 * source-map:一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
 * 
 * [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
 * 
 * source-map:外部
 *  错误代码准确信息 和 源代码的错误位置
 * 
 * inline-source-map:内联
 *  只生产一个内联source-map
 *  错误代码准确信息 和 源代码的错误位置
 * 
 * hidden-source-map:外部
 *  错误代码错误原因，但是没有错误位置
 *  不能追踪源代码错误，只能提示到构建后代码的错误位置
 * 
 * eval-source-map:内联
 *  每一个文件都生产对应的source-map,都在eval
 *  错误代码准确信息 和 源代码的错误位置
 * 
 * nosources-source-map:外部
 * 错误代码准确信息，但是没有任何源代码信息
 * 
 * cheap-source-map:外部
 * 错误代码准确信息 和 源代码的错误位置
 * 只能精确到行
 * 
 * cheap-module-source-map:外部
 * 错误代码准确信息 和 源代码的错误位置
 * module会将loader的source map 加入
 * 
 * 内联 和 外部的区别：1.外部生成了文件，内联没有。2.内联构建速度更快
 * 
 * 开发环境：速度快，调试更友好
 *  速度快(eval>inline>cheap>...)
 *    eval-cheap-source-map
 *    eval-source-map
 *  调试更友好
 *    source-map
 *    cheap-module-source-map
 *    cheap-source-map
 * 
 *  --> eval-source-map / eval-cheap-module-source-map
 * 
 * 生产环境：源代码要不要隐藏？调试要不要更友好
 *  内联会让代码体积更大，所有生产环境不用内联
 *  nosources-source-map 全部隐藏
 *  hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
 * 
 *  --> source-map / cheap-module-source-map
 * 
 */

oneOf

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

//定义nodejs环境变量：绝对使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

//复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    //还需要在package.json中定义browserlist
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:()=>[
          require('postcss-preset-env')()
        ]
      }
    }
]

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        //在package.json中eslintConfig --> airbnb
        test:/\.js$/,
        exclude:/node_modules/,
        //优先执行
        enforce:'pre',
        loader:'eslint-loader',
        options:{
          fix:true
        }
      },
      {
        //以下loader只会匹配一个
        //注意：不能有两个配置处理同一种类型文件
        oneOf:[
          {
            test:/\.css$/,
            use:[...commonCssLoader]
          },
          {
            test:/\.less$/,
            use:[...commonCssLoader,'less-loader']
          },
          /**
           * 正常来讲，一个文件只能被一个loader处理
           * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
           *  先执行eslint 再执行bebel
           */
          {
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'babel-loader',
            options:{
              presets:[
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns:'usage',
                    corejs:{version:3},
                    targets:{
                      chrome:'60',
                      firefox:'50'
                    }
                  }
                ]
              ]
            }
          },
          {
            test:/\.(jpg|png|gif)/,
            loader:'url-loader',
            options:{
              limit:8*1024,
              name:'[hash:10].[ext]',
              outputPath:'imgs',
              esModule:false
            }
          },
          {
            test:/\.html$/,
            loader:'html-loader'
          },
          {
            exclude:/\.(js|css|less|html|jpg|png|gif)/,
            loader:'file-loader',
            options:{
              outputPath:'media'
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename:'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  mode:'production'
}

缓存

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**
 * 缓存：
 * 
 *  babel缓存
 *    cacheDirectory:true
 *    --->让第二次打包构建速度更快
 * 
 *  文件资源缓存
 *    hash:每次webpack构建时会生成一个唯一的hash值
 *  问题：因为js和css同时使用一个hash值
 *    如果重新打包，会导致所有缓存失效。(可能我却值改动一个文件)
 *  chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样
 *    问题：js和css的hash值还是一样的
 *      因为css是在js中引入的，所有同属于一个chunk
 *  contenthash:根据文件的内容生成hash值。不同文件的hash值一定不一样
 *  --> 让代码上线运行缓存更好使用
 */
//定义nodejs环境变量：绝对使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

//复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    //还需要在package.json中定义browserlist
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:()=>[
          require('postcss-preset-env')()
        ]
      }
    }
];

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        //在package.json中eslintConfig --> airbnb
        test:/\.js$/,
        exclude:/node_modules/,
        //优先执行
        enforce:'pre',
        loader:'eslint-loader',
        options:{
          fix:true
        }
      },
    {
      //以下loader只会匹配一个
      //注意：不能有两个配置处理同一种类型文件
      oneOf:[
        {
          test:/\.css$/,
          use:[...commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader,'less-loader']
        },
        /**
         * 正常来讲，一个文件只能被一个loader处理
         * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
         *  先执行eslint 再执行bebel
         */
        {
          test:/\.js$/,
          exclude:/node_modules/,
          loader:'babel-loader',
          options:{
            presets:[
              [
                '@babel/preset-env',
                {
                  useBuiltIns:'usage',
                  corejs:{version:3},
                  targets:{
                    chrome:'60',
                    firefox:'50'
                  }
                }
              ]
            ],
            //开启babel缓存
            //第二次构建时，会读取之前的缓存
            cacheDirectory:true
          }
        },
        {
          test:/\.(jpg|png|gif)/,
          loader:'url-loader',
          options:{
            limit:8*1024,
            name:'[contenthash:10].[ext]',
            outputPath:'imgs',
            esModule:false
          }
        },
        {
          test:/\.html$/,
          loader:'html-loader'
        },
        {
          exclude:/\.(js|css|less|html|jpg|png|gif)/,
          loader:'file-loader',
          options:{
            outputPath:'media'
          }
        }
      ]
    }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename:'css/built.[contenthash:10].css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  mode:'production',
  devtool:'source-map'
}

tree shaking

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**
 * tree shaking:去除无用代码
 *  前提：1.必须使用ES6模块化 2.开启production环境
 *  作用：减少代码体积
 * 
 *  在package.json中配置
 *    "sideEffects":false 所有代码都没有副作用（都可以进行tree shaking）
 *      问题：可能会把css /@babel/polyfill (副作用)文件干掉
 *    "sideEffects":["*.css","*.less"]
 */

//定义nodejs环境变量：绝对使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

//复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    //还需要在package.json中定义browserlist
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:()=>[
          require('postcss-preset-env')()
        ]
      }
    }
];

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        //在package.json中eslintConfig --> airbnb
        test:/\.js$/,
        exclude:/node_modules/,
        //优先执行
        enforce:'pre',
        loader:'eslint-loader',
        options:{
          fix:true
        }
      },
    {
      //以下loader只会匹配一个
      //注意：不能有两个配置处理同一种类型文件
      oneOf:[
        {
          test:/\.css$/,
          use:[...commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader,'less-loader']
        },
        /**
         * 正常来讲，一个文件只能被一个loader处理
         * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
         *  先执行eslint 再执行bebel
         */
        {
          test:/\.js$/,
          exclude:/node_modules/,
          loader:'babel-loader',
          options:{
            presets:[
              [
                '@babel/preset-env',
                {
                  useBuiltIns:'usage',
                  corejs:{version:3},
                  targets:{
                    chrome:'60',
                    firefox:'50'
                  }
                }
              ]
            ],
            //开启babel缓存
            //第二次构建时，会读取之前的缓存
            cacheDirectory:true
          }
        },
        {
          test:/\.(jpg|png|gif)/,
          loader:'url-loader',
          options:{
            limit:8*1024,
            name:'[contenthash:10].[ext]',
            outputPath:'imgs',
            esModule:false
          }
        },
        {
          test:/\.html$/,
          loader:'html-loader'
        },
        {
          exclude:/\.(js|css|less|html|jpg|png|gif)/,
          loader:'file-loader',
          options:{
            outputPath:'media'
          }
        }
      ]
    }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename:'css/built.[contenthash:10].css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  mode:'production',
  devtool:'source-map'
}

code split

demo1

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //单入口
  // entry:'./src/js/index.js',
  entry:{
    //多入口：有一个入口，最终输出就有一个bundle
    main:'./src/js/index.js',
    test:'./src/js/test.js'
  },
  output:{
    //[name]:取文件名
    filename:'js/[name].[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  mode:'production',
}

demo2

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //单入口
  // entry:'./src/js/index.js',
  entry:{
    //多入口：有一个入口，最终输出就有一个bundle
    main:'./src/js/index.js',
    test:'./src/js/test.js'
  },
  output:{
    //[name]:取文件名
    filename:'js/[name].[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  /**
   * 1.可以将node_modules中代码单独打包一个chunk最终输出
   * 2.自动分析多入口chunk中，有没有公共的文件。如果有会单独打包一个chunk
   */
  optimization:{
    splitChunks:{
      chunks:'all'
    }
  },
  mode:'production',
}

demo3

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //单入口
  entry:'./src/js/index.js',
  // entry:{
  //   //多入口：有一个入口，最终输出就有一个bundle
  //   main:'./src/js/index.js',
  //   test:'./src/js/test.js'
  // },
  output:{
    //[name]:取文件名
    filename:'js/[name].[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  /**
   * 1.可以将node_modules中代码单独打包一个chunk最终输出
   * 2.自动分析多入口chunk中，有没有公共的文件。如果有会单独打包一个chunk
   */
  optimization:{
    splitChunks:{
      chunks:'all'
    }
  },
  mode:'production',
}

lazy loading

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/[name].[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    })
  ],
  optimization:{
    splitChunks:{
      chunks:'all'
    }
  },
  mode:'production',
}

pwa

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
/**
 * PWA:渐进式网络开发应用程序（离线可访问）
 *  workbox --> workbox-webpack-plugin
 */

//定义nodejs环境变量：绝对使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

//复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    //还需要在package.json中定义browserlist
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:()=>[
          require('postcss-preset-env')()
        ]
      }
    }
];

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        //在package.json中eslintConfig --> airbnb
        test:/\.js$/,
        exclude:/node_modules/,
        //优先执行
        enforce:'pre',
        loader:'eslint-loader',
        options:{
          fix:true
        }
      },
    {
      //以下loader只会匹配一个
      //注意：不能有两个配置处理同一种类型文件
      oneOf:[
        {
          test:/\.css$/,
          use:[...commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader,'less-loader']
        },
        /**
         * 正常来讲，一个文件只能被一个loader处理
         * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
         *  先执行eslint 再执行bebel
         */
        {
          test:/\.js$/,
          exclude:/node_modules/,
          loader:'babel-loader',
          options:{
            presets:[
              [
                '@babel/preset-env',
                {
                  useBuiltIns:'usage',
                  corejs:{version:3},
                  targets:{
                    chrome:'60',
                    firefox:'50'
                  }
                }
              ]
            ],
            //开启babel缓存
            //第二次构建时，会读取之前的缓存
            cacheDirectory:true
          }
        },
        {
          test:/\.(jpg|png|gif)/,
          loader:'url-loader',
          options:{
            limit:8*1024,
            name:'[contenthash:10].[ext]',
            outputPath:'imgs',
            esModule:false
          }
        },
        {
          test:/\.html$/,
          loader:'html-loader'
        },
        {
          exclude:/\.(js|css|less|html|jpg|png|gif)/,
          loader:'file-loader',
          options:{
            outputPath:'media'
          }
        }
      ]
    }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename:'css/built.[contenthash:10].css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    }),
    new WorkboxWebpackPlugin.GenerateSW({
      /**
       * 1.帮助 serviceworker快速启动
       * 2.删除旧的 serviceworker
       * 
       * 生成一个 serviceworker 配置文件~
       */
      clientsClaim:true,
      skipWaiting:true
    })
  ],
  mode:'production',
  devtool:'source-map'
}

多进程打包

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
/**
 * PWA:渐进式网络开发应用程序（离线可访问）
 *  workbox --> workbox-webpack-plugin
 */

//定义nodejs环境变量：绝对使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

//复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    //还需要在package.json中定义browserlist
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:()=>[
          require('postcss-preset-env')()
        ]
      }
    }
];

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.[contenthash:10].js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        //在package.json中eslintConfig --> airbnb
        test:/\.js$/,
        exclude:/node_modules/,
        //优先执行
        enforce:'pre',
        loader:'eslint-loader',
        options:{
          fix:true
        }
      },
    {
      //以下loader只会匹配一个
      //注意：不能有两个配置处理同一种类型文件
      oneOf:[
        {
          test:/\.css$/,
          use:[...commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader,'less-loader']
        },
        /**
         * 正常来讲，一个文件只能被一个loader处理
         * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
         *  先执行eslint 再执行bebel
         */
        {
          test:/\.js$/,
          exclude:/node_modules/,
          use:[
            /**
             * 开启多进程打包
             * 进程开启大概为600ms,进程通信也有开销
             * 只有工作消耗实践比较长，才需要多进程打包
             */
            {
              loader:'thread-loader',
              options:{
                workers:2//进程2个
              }
            },
            {
              loader:'babel-loader',
              options:{
                presets:[
                  [
                    '@babel/preset-env',
                    {
                      useBuiltIns:'usage',
                      corejs:{version:3},
                      targets:{
                        chrome:'60',
                        firefox:'50'
                      }
                    }
                  ]
                ],
                //开启babel缓存
                //第二次构建时，会读取之前的缓存
                cacheDirectory:true
              }
            }
          ]
        },
        {
          test:/\.(jpg|png|gif)/,
          loader:'url-loader',
          options:{
            limit:8*1024,
            name:'[contenthash:10].[ext]',
            outputPath:'imgs',
            esModule:false
          }
        },
        {
          test:/\.html$/,
          loader:'html-loader'
        },
        {
          exclude:/\.(js|css|less|html|jpg|png|gif)/,
          loader:'file-loader',
          options:{
            outputPath:'media'
          }
        }
      ]
    }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename:'css/built.[contenthash:10].css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    }),
    new WorkboxWebpackPlugin.GenerateSW({
      /**
       * 1.帮助 serviceworker快速启动
       * 2.删除旧的 serviceworker
       * 
       * 生成一个 serviceworker 配置文件~
       */
      clientsClaim:true,
      skipWaiting:true
    })
  ],
  mode:'production',
  devtool:'source-map'
}

externals

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'production',
  externals:{
    //拒绝jQuery被打包进来
    jquery:'jQuery'
  }
}

dll

webpack.config.js


const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin')
const webpack = require('webpack')
const AddAssetHtmlWebpackPlugin= require('add-asset-html-webpack-plugin')

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    }),
    //告诉webpack哪些库不参与打包，同时使用时的名称也得变~
    new webpack.DllReferencePlugin({
      manifest:resolve(__dirname,'dll/manifest.json')
    }),
    //将某个文件打包输出出去，并在html中自动引入该资源
    new AddAssetHtmlWebpackPlugin({
      filepath:resolve(__dirname,'dll/jquery.js')
    })
  ],
  mode:'development'
}

webpack.dll.js

/**
 * 使用dll技术，对某些库（第三方库：jquery,react,vue...）进行单独打包
 *  当你运行 webpack 时，默认查找 webpack.config.js配置文件
 *  需求：需要运行 webpack.dll.js文件
 *    --> 
 * 
 * 
 */

const { resolve } = require("path");
const webpack = require("webpack");

module.exports = {
  entry:{
    //最终打包生成的[name] --> jquery
    //['jquery'] --> 要打包的库是jquery
    jquery:['jquery']
  },
  output:{
    filename:'[name].js',
    path:resolve(__dirname,'dll'),
    library:'[name]_[hash]'//打包的库里面向外暴露出去的内容叫什么名字
  },
  plugins:[
    //打包生成一个manifest.json --> 提供和jquery映射
    new webpack.DllPlugin({
      name:'[name]_[hash]',//映射库的暴露的内容名称
      path:resolve(__dirname,'dll/manifest.json')//输出文件目录
    })
  ],
  mode:'production'
}

性能优化总结

### 开发环境性能优化

* 优化打包构建速度
  * HMR
* 优化代码调试
  * source-map



### 生产环境性能优化

* 优化打包构建速度
  * oneOf
  * babel缓存
  * 多进程打包
  * externals
  * dll
* 优化代码运行的性能
  * 缓存（hash-chunkhash-contenthash）
  * tree shaking
  * code split
  * 懒加载/预加载
  * pwa

第五章：Webpack配置详解

entry



const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**
 * entry:入口起点
 *  1.string --> './src/index.js'
 *    打包形成一个chunk。输出一个bundle文件
 *    此时chunk的名称默认时 main
 *  2.array --> ['./src/index.js','./src/add.js']
 *    多入口
 *    所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件
 *      --> 只有在 HMR功能中让html热更新生效
 *  3.object
 *    多入口
 *    有几个入口文件就形成几个chunk,输出几个bundle文件
 *    此时chunk的名称是key
 * 
 *    -->特殊用法
      * {
      *   //所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件
          index:['./src/index.js','./src/count.js'],
          //形成一个chunk,输出一个bundle文件
          add:'./src/add.js'
        },
 */

module.exports = {
  entry:{
    index:['./src/index.js','./src/count.js'],
    add:'./src/add.js'
  },
  output:{
    filename:'[name].js',
    path:resolve(__dirname,'build')
  },
  plugins:[new HtmlWebpackPlugin()],
  mode:'development'
}

output



const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**
 * entry:入口起点
 *  1.string --> './src/index.js'
 *    打包形成一个chunk。输出一个bundle文件
 *    此时chunk的名称默认时 main
 *  2.array --> ['./src/index.js','./src/add.js']
 *    多入口
 *    所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件
 *      --> 只有在 HMR功能中让html热更新生效
 *  3.object
 *    多入口
 *    有几个入口文件就形成几个chunk,输出几个bundle文件
 *    此时chunk的名称是key
 * 
 *    -->特殊用法
      * {
      *   //所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件
          index:['./src/index.js','./src/count.js'],
          //形成一个chunk,输出一个bundle文件
          add:'./src/add.js'
        },
 */

module.exports = {
  entry:{
    index:['./src/index.js','./src/count.js'],
    add:'./src/add.js'
  },
  output:{
    filename:'[name].js',
    path:resolve(__dirname,'build')
  },
  plugins:[new HtmlWebpackPlugin()],
  mode:'development'
}

module



const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'js/[name].js',
    path:resolve(__dirname,'build'),
  },
  module:{
    rules:[
      //loader的配置
      {
        test:/\.css$/,
        //多个loader用use
        use:['style-loader','css-loader']
      },
      {
        test:/\.js$/,
        //排除node_modules下的js文件
        exclude:/node_modules/,
        //只检查 src 下的js文件
        include:resolve(__dirname,'src'),
        //优先执行
        enforce:'pre',
        //延后执行
        // enforce:'post',
        //当loader用loader
        loader:'eslint-loader',
        options:{}
      },
      {
        //以下配置只会生效一个
        oneOf:[]
      }
    ]
  },
  plugins:[new HtmlWebpackPlugin()],
  mode:'development'
}

resolve



const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/[name].js',
    path:resolve(__dirname,'build'),
  },
  module:{
    rules:[
      //loader的配置
      {
        test:/\.css$/,
        //多个loader用use
        use:['style-loader','css-loader']
      },
    ]
  },
  plugins:[new HtmlWebpackPlugin()],
  mode:'development',
  //解析模块的规则
  resolve:{
    //配置解析模块路径别名：优点简写路径 缺点路径没有提示
    alias:{
      $css:resolve(__dirname,'src/css'),
    },
    //配置省略文件路径的后缀名
    extensions:['.js','.json','.jsx','.css'],
    //告诉 webpack 解析模块是取找哪个目录
    modules:[resolve(__dirname,'../../node_modules'),'node_modules']
  }
}

dev server



const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/[name].js',
    path:resolve(__dirname,'build'),
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
    ]
  },
  plugins:[new HtmlWebpackPlugin()],
  mode:'development',
  resolve:{
    alias:{
      $css:resolve(__dirname,'src/css'),
    },
    extensions:['.js','.json','.jsx','.css'],
    modules:[
      resolve(__dirname,'../../node_modules'),'node_modules']
  },
  devServer:{
    //运行代码目录
    contentBase:resolve(__dirname,'build'),
    //监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase:true,
    watchOptions:{
      //忽略文件
      ignored:/node_modules/
    },
    //启动gzip压缩
    compress:true,
    //端口号
    port:5000,
    //域名
    host:'localhost',
    //自动打开浏览器
    open:true,
    //开启HMR功能
    hot:true,
    //不用显示启动服务器日志信息
    clientLogLevel:'none',
    //处理一些基本启动信息以外，其他内容都不要显示
    quiet:true,
    //如果出错了，不要全屏提示
    overlay:false,
    //服务器代理 -->解决开发环境跨域问题
    proxy:{
      //一旦devServer(5000)服务器接收到 /api/xxx 的请求，就会把请求转发到另外一个服务器（3000）
      '/api':{
        target:'http://localhost:3000',
        //发送请求时，请求路径重新：将 /api/xxx --> /xxx (去掉/api)
        pathRewrite:{
          '^/api':''
        }

      }
    }
  }
}

optimazation



const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/[name].[contenthash:10].js',
    path:resolve(__dirname,'build'),
    chunkFilename:'js/[name].[contenthash:10]_chunk.js'
  },
  module:{
    rules:[
      //loader的配置
      {
        test:/\.css$/,
        //多个loader用use
        use:['style-loader','css-loader']
      },
    ]
  },
  plugins:[new HtmlWebpackPlugin()],
  mode:'production',
  //解析模块的规则
  resolve:{
    //配置解析模块路径别名：优点简写路径 缺点路径没有提示
    alias:{
      $css:resolve(__dirname,'src/css'),
    },
    //配置省略文件路径的后缀名
    extensions:['.js','.json','.jsx','.css'],
    //告诉 webpack 解析模块是取找哪个目录
    modules:[resolve(__dirname,'../../node_modules'),'node_modules']
  },
  optimization:{
    splitChunks:{
      chunks:'all',
      //默认值，可以不写
      // minSize:30*1024,//风的chunks最小为30kb
      // maxSize:0,//最大没有限制
      // minChunks:1,//要提取的chunk最小被引用1次
      // maxAsyncRequests:5,//按需加载时并行加载的文件的最大数量
      // maxInitialRequest:3,//入口js文件最大并行请求数量
      // automaticNameDelimiter:'~',//名称连接符
      // name:true,//可以使用命名规范
      // cacheGroups:{//分割chunk的组
      //   //node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
      //   //满足上面的公共规则：如：大小超过30kb,至少被引用一次
      //   vendors:{
      //     test:/[\\/]node_modules[\\/]/,
      //     //优先级
      //     priority:-10
      //   },
      //   default:{
      //     //要提取的chunk最少被引用2次
      //     minChunks:2,
      //     //优先级
      //     priority:-20,
      //     //如果当前要打包的模块。和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
      //     reuseExistingChunk:true
      //   }
      // }
    },
    //将当前模块的记录其他模块的hash单独打包成一个文件 runtime
    //解决：修改a文件导致b文件的contenthash变化
    runtimeChunk:{
      name:entrypoint => `runtime-${entrypoint.name}`
    },
    minimizer:[
      //配置生产环境的压缩方案：js和css
      new TerserWebpackPlugin({
        //开启缓存
        cache:true,
        //开启多进程打包
        parallel:true,
        //其余source-map
        sourceMap:true
      })
    ]
  }
}

 npm i terser-webpack-plugin@2.3.5 -D

package.json

{
  "name": "webpack_code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.20.2",
    "add-asset-html-webpack-plugin": "^3.1.3",
    "babel": "^6.23.0",
    "babel-loader": "^8.0.6",
    "core-js": "^3.6.4",
    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.1.3",
    "terser-webpack-plugin": "^2.3.5",
    "thread-loader": "^2.1.3",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "workbox-webpack-plugin": "^5.0.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },
  "sideEffects": [
    "*.css"
  ],
  "dependencies": {
    "jquery": "^3.6.4"
  }
}