1. 安装： npm install webpack webpack-cli webpack-dev-server -D
2. 创建配置文件：webpack.config.js

插件(plugin)

webpack 打包html资源(html-webpack-plugin)

 1. 安装：npm install html-webpack-plugin -D
 2. 引入：const HtmlWebpackPlugin = require('html-webpack-plugin')

/*
  * 4. plugins(插件)
  * */
  plugins: [
    // 默认会创建一个空的
    new HtmlWebpackPlugin({
      // 复制"./scr/index.html"文件，并自动引入打包输出的所有资源
      template: "./src/index.html",
      // 默认是"index.html"名称，通过filename设置输出文件名
      filename: "index.html",
      // 指定加载打包js文件
      // chunks: []
      // 压缩html文件
      /*minify: {
        // 移除空格
        collapseWhitespace: true,
        // 删除注释
        removeComments: true
      }*/
    }),

    // css单独的文件
    new MiniCssExtractPlugin({
      filename: './styles/[name].css'
    }),

    // 去除无用css
    new PurgecssWebpackPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
    })
  ]

提取css为单独的文件(mini-css-extract-plugin)

1. 安装：npm install mini-css-extract-plugin -D
2. 引入：const MiniCssExtractPlugin = require('mini-css-extract-plugin')

  /*
  * 3. loader 处理非javascript资源css,img等
  * */
  module: {
    rules: [
      {
        // 匹配文件
        test: /\.css$/,
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'post-loader']
      },
      {
        test: /\.scss$/,
        // use: ['style-loader', 'css-loader', 'sass-loader', 'post-loader']
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'post-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        loader: "url-loader",
        options: {
          outputPath: '/images', // 打包输出文件
          limit: 10000,  // 限制文件大小，超过以base4形式
          name: '[name][hash:12].[ext]'
        }
      },
      // html中使用图片时，打包处理
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      // 加载font字体
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },
      // 解析es6
      {
        test: '/\.js$/',
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          option: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime'
              ]
            ]
          }
        }
      }
      // eslint 检查js规范
      /*{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      }*/
    ]
  },

plugins: [
    // css单独的文件
    new MiniCssExtractPlugin({
      filename: './styles/[name].css'
    }),
]

压缩js(terser-webpack-plugin) 和压缩 css(css-minimizer-webpack-plugin)

# 压缩js(terser-webpack-plugin)
1. 安装：npm install terser-webpack-plugin -D
2. 引入：const TerserPlugin = require('terser-webpack-plugin')


# 压缩css(css-minimizer-webpack-plugin)
1. 安装：npm install css-minimizer-webpack-plugin -D
2. 引入： const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

optimization: {
   minimizer: [
        new CssMinimizerPlugin(),
        new TerserPlugin()
   ],
},
plugins: [new MiniCssExtractPlugin()],

去除无用css(purgecss-webpack-plugin)

1. 安装：npm install purgecss-webpack-plugin -D
2. 引入：const PurgecssWebpackPlugin = require('purgecss-webpack-plugin')

const glob = require('glob');
const path = require('path');
const PATHS = {
  src: path.join(__dirname, 'src')
};

plugins: [
    // 去除无用css
    new PurgeCssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
    })
  ]

外部资源(loader)

webpack 打包css资源

1. 安装：npm install css-loader style-loader -D

webpack 打包less或sass资源

#less使用：
1. 安装：npm install less less-loader -D

#sass使用：
1. 安装：npm install node-sass sass-loader -D

处理css的兼容性(postcss-loader 和 postcss-preset-env)

1. 安装：npm install postcss-loade postcss-preset-env -D
2. pcakage.json中添加 
      "browserslist": [
           "> 1%",
           "not dead",
           "last 2 version"
       ]
3. 在src同级创建postcss.config.js文件，并添加
       module.exports = {
          plugins: [
            require('postcss-preset-env')()
          ]
       }

css文件图片打包资源(url-loader 和 file-loader)

1. 安装：npm install url-loader file-loader -D

html文件中图片打包资源(html-loader)

1. 安装：npm install html-loader -D

代码检查(eslint)

1. 安装：npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

解析ES6

babel-loader: 解析eS6的桥梁, @babel/core: babel核心模块, @babel/preset-env: babel预设，一组babel插件集合

1. 安装 npm install babel-loader @babel/core @babel/preset-env -D

2. 兼容async/await语法:
      regeneratorRuntime是webpack打包生成的辅助函数，由babel生成，用于兼容async/await语法
      1. npm install @babel/runtime -D
      2. npm install @babel/plugin-transform-runtime -D

3. ES6语法降级: 
      1. 安装 npm install @babel/polyfill -D
      2. 安装 npm install core-js@3 -D

module: {
    rules: [
        {
        test: '/\.js$/',
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',  // ES6语法降级：@babel/polyfill 按需加载
                corejs: 3  // coer-js@3
              }
            ],
            plugins: [
              [
                '@babel/plugin-transform-runtime'
              ]
            ]
          }
        }
      }
    ]
}

合并开发环境和生成环境文件

1. 安装 npm install webpack-merge -D


module: {
    rules: [
      // css处理
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      // scss 处理
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
      },
      // 图片处理
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        // loader: "url-loader",
        // options: {
        //   outputPath: 'images', // 打包输出文件
        //   limit: 10000,  // 限制文件大小，超过以base4形式
        //   name: '[name][hash:12].[ext]'
        // },
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024
          }
        }
      },
      // html中使用图片时，打包处理
      {
        test: /\.html$/i,
        loader: 'html-loader'
      },
      {
        test: /\.svg/,
        type: 'asset/inline'
      },
      // 加载font字体
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/font/[hash][ext]'
        }
      },
      // 解析es6
      {
        test: '/\.js$/',
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',  // ES6语法降级：@babel/polyfill 按需加载
                corejs: 3  // coer-js@3
              }
            ],
            plugins: [
              [
                '@babel/plugin-transform-runtime'
              ]
            ]
          }
        }
      }
    ]
  }