webpack5的基本使用以及核心配置项

mode(模式)

mode: "development" // 开发模式，js代码默认不被压缩
      "production"  // 生产模式，js代码默认压缩

entry(项目入口)

代表着webpack打包时第一个开始的文件，会递归的打包你所引用的文件(不被引用的文件不会被打包)

// string 形式,单入口
entry: "./src/main.js"

output(项目出口)

output: {
    // 打包后的文件名
    filename: "boundle.js",
    // 打包的绝对路径,mode为开发模式时可以设置为undefined，开发模式会打包在内存中编译
    path: path.resolve(__dirname, "dist"),
    // 开启自动清除上一次的打包结果
    clean: true,
},

module(对各种类型的文件做编译处理)

// 将编译后的css文件让html文件以link的方式引入(使用时需要再plugin配置项中调用)
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const os = require("os")
// 压缩js
const TerserPlugin = require("terser-webpack-plugin")

// 判断cpu核数
const threads = os.cpus().length

module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              {
                针对于兼容其他浏览器的css语法的loader，要相对应去配置packae.son
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    // 智能预设
                    plugins: [["postcss-preset-env"]],
                  },
                },
              },
            ],
          },
          {
            test: /\.scss$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    plugins: [["postcss-preset-env"]],
                  },
                },
              },
              "sass-loader",
            ],
          },
          {
            test: /\.(jpe?g|webp|gif|svg|png)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024,
              },
            },
          },
          {
            test: /\.js$/,
            忽略nodemodules下面的文件
            exclude: /node_modules/,
            
            use:[{
                    loader: "thread-loader",
                    options: {
                        // 进程数量
                        works: threads
                    }
                },
                {
                    loader: "babel-loader",
                    options: {
                      开启缓存
                      cacheDirectory: true,
                      关闭缓存压缩
                      cacheCompression: false,
                      // 减少代码体积，采用公用导出会被打包单独一个文件
                      plugins: [
                          "@babel/plugin-transform-runtime"
                      ]
                    },
                }
            ]
            
          },
        ],
      },
    ],
  },

plugins(插件)

const HtmlWebpackPlugin = require("html-webpack-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      // 以当前配置文件为模板，不填则会自动创建一个模板，并且会自动引入入口文件打包后的路径
      template: "./index.html",
    }),
    // 压缩css插件
    new ESLintPlugin({
      context: path.resolve(__dirname, "src"),
      exclude: "node_modules",
      开启缓存
      cache: true,
      缓存目录位置
      cacheLocation: path.resolve(__dirname, "node_modules/.cache/eslintcache"),
      // 多线程检查
      threads
    }),
]

压缩

optimization: {
   minimizer: [
       css压缩
       new CssMinimizerPlugin()
   ],
},

devServer(静态资源服务起)

devServer: {
    // 域名
    host: "localhost",
    // 端口号
    port: "8080",
    // 模块热更新
    hot: true,
},

HMR(热更新)

在配置以上的配置后，通常js文件更改了，我们的web页面仍然是通过重新编译刷新的手段去更新，一些 Vue的类型文件就还好，配置了vue-loader会有模块的更新，不会打包重新编译整个项目，所以js需要我们 单独的去处理

import add from "./add.js"

add(1,2)

// 如果我们更改了add.js文件，目前仍然是重新打包的我们就可以在下面写上以下代码
if(module.hot) {
    module.hot.accept("./add.js")
}

命令行

通常我们会针对开发环境和生产环境搭配两套不同的配置，就可以有两个配置文件webpack.dev.js和webpack.prod.js (文件名当然是随意各位去命名的)，这个时候要使用任意一个配置可以通过命令行去完成，

"build": "webpack --config ./config/webpack.prod.js",

"dev": "webpack serve --config ./config/webpack.dev.js"