打包模式配置

在前面的package.json中，为了打包develop的版本，在scripts标签中加入了--mode development的配置。在webpack.config.js中是有对应的选项来进行配置的，现在我们将scripts中的配置项转移到配置文件中

package.json

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
-    "build": "webpack --mode development"
+    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.3",
    "style-loader": "^3.3.2",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2"
  },
  "dependencies": {
    "html-webpack-plugin": "^5.5.1",
    "lodash": "^4.17.21"
  }
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
+ mode:"development",
  entry: {
    index: "/src/index.js",
    print: "/src/print.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "资源输出",
      filename: "webpack.html"
    }),
  ],
};

这样进行配置之后，通过npm run build来进行webpack的打包，输出的内容和之前的一致。将mode配置修改成production之后，打包的js文件中进行了代码混淆，一些开发环境的代码被移除，说明配置是可以正常使用的。

打包模式配置​

打包模式配置