1.webpackd的基本架构

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const path = require("path");
​
// 使用函数来封装部分代码，提高利用效率
function getStyleLodar(per) {
  return [
    MiniCssExtractPlugin.loader, 
    "css-loader",
     // "postcss-loader"要写在css下面和per的上面，要不然会报错
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [["postcss-preset-env"]],
        },
      },
    },
    per,
  ].filter(Boolean);
}
​
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/main.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: getStyleLodar(),
      },
      {
        test: /\.less$/i,
        use: getStyleLodar("less-loader"),
      },
      {
        test: /\.scss$/i,
        use: getStyleLodar("scss-loader"),
      },
      {
        test: /\.(jpg|png|gif)/, //处理图片文件
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: "static/images/[hash][ext][query]",
        },
      },
      {
        test: /\.m?js$/,  // 处理js文件，使js具备兼容
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            // 智能预设
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 创建打包后的html模版，结构和原来一致。自动引入所需资源
      template: path.resolve(__dirname, "../public/index.html"),  
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/main.css",   // 兼容css样式
    }),
  ],
  optimization: {
    //执行压缩的操作
    minimizer: [new CssMinimizerPlugin()], // css压缩，js和html在production环境下自动压缩
    minimize: true,
  },
  mode: "development",
  devServer: {
    host:'localhost' // 启动的服务器域名
    port: 3000,  // 端口号
    open: true,  // 自动打开
  },
  devtool: "cheap-module-source-map",   // dev环境下使用cheap-module-source-map，prod环境使用source-map
};

• entry：是webpack的入口文件，当依赖文件是单个文件时，直接采用字符串写法；当依赖是多文件时，可以采用对象或者是数组的写法。

• output：

  1. path：使用node的resolv api来规定打包后的主文件夹存放位置，使用“__dirname”获取到当前路径，第二个参数为绝对路径，合起来为打包后的路径。

  2. filename：使用相对路径，js打包后的存放位置。

  3. clean：设置为true则每次打包会清空上一次的内容。

• model：

  loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

• plugins：插件的目的在于解决loader无法解决的事情，webpack的插件是一个具有apply方法的JavaScript对象，apply方法会被webpack compilre调用，并且整个编译生命周期都可以访问compilre对象。

• mode：有两个可选值，是development | production 对应着 调试环境和开发环境

2.webpack高级

1. source-map：在开发和生产环境下，提供代码报错映射，可以更快的找到错误代码，提高调试效率。生产环境下可以提示行列，开发环境下只能提示第几行

2. devServer.hot(HMR)：热重载开启，不需要反复打包。默认开启css热重载，在官网可以找到vue-loader来开启vue项目的热重载，以及react-loader等

3. oneOf：设置loader中只会匹配其中最正确的一项

4. include和exclude： 排除或包含某文件打包编译，通常只需要处理js文件，如：loader: "babel-loader"

5. 缓存：通常只用处理js缓存 ，代码如下 cacheDirectory: true // 开启缓存, cacheCompression: false, // 关闭缓存压缩

6. thread-loader：多线程打包，在文件少的时候会增加打包的时间，在大文件时会减少打包时间

   实例用法：
   npm install --save-dev thread-loader
   const os = require("os");
   主要用于 babel-loader
   实例loader：
   {
       test: /\.m?js$/,
       include: path.resolve(__dirname, "../src"),
       use: [
         {
           loader: "babel-loader",
           options: {
             // 智能预设
             presets: ["@babel/preset-env"],
             cacheDirectory: true,
             cacheCompression: false,
           },
         },
         {
           loader: "thread-loader",
           workers: os.cpus().length - 1,
         },
       ],
     },

7. 减少babel生成的代码体积

   // 安装依赖
   npm install -D @babel/plugin-transform-runtime
   ​
   将下面代码添加到babel的options里面
   plugins: ['@babel/plugin-transform-runtime'],

8. 压缩图片 https://www.webpackjs.com/plugins/image-minimizer-webpack-plugin/#root