Webpack uses traditional engineering projects

Time:2021-12-4
explain

This is a recent learning note in learning and practicing webpack. You are welcome to correct any deficiencies
The front-end framework is not involved here, but simply using webpack

Project directory structure

Webpack demo (learning project directory)
|—config
|——Webpack.base.js (forCommon configuration)
|——Webpack.dev.js (forDevelopment configuration)
|——Webpack.pro.js (forPublish configuration)
|—dist
|—src
|——Public (static resource file)
|———-imgs
|———-js
|———-fonts
|———-less
|———-html
|——Index.html (home page)
|——Main.js (entry file)

Let’s look at the configuration

package.json

{
  "scripts": {
    "build": "webpack --config config/webpack.pro.js",
    "dev": "webpack-dev-server --config config/webpack.dev.js"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.1.3",
    "url-loader": "^4.1.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }
}
in the light ofSingle entry

//file=>config=>webpack.base.js

//For public environment configuration
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "js/bundle.js",
    // publicPath: "./",
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            /*         options: {
              publicPath: "../",
            }, */
          },
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpg|gif|jfif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8 * 1024,
              name: "[name].[ext]",
              publicPath: "../imgs",
              outputPath: "imgs/",
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
    new MiniCssExtractPlugin({ filename: "css/index.css" }),
  ],
};

//file=>config=>webpack.dev.js

//For development environment configuration
const base = require("./webpack.base.js"); // Non SRC node modules
const merge = require("webpack-merge");
const path = require("path");
module.exports = merge(base, {
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, "../dist"),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
  },
});

//file=>config=>webpack.pro.js

//For production environment configuration
const base = require("./webpack.base.js");
const merge = require("webpack-merge");
module.exports = merge(base, {
  mode: "production",
});

in the light ofMultiple entry

Just change the entry under webpack.base.js to the object format

  entry: {
    main: "./src/main.js",
    index: "./src/js/index.js",
  },

For multiple JS modules, the shared modules can be divided by using the SPID code provided by webpack. See: it is recommended here that if the shared modules are less than 30K, they can be usedIf the module is too large, there is no need to request again

 optimization: {
    splitChunks: {
      chunks: "all",
    },
  },

Here, just add it to webpack.base.js, under plugins

Recommended Today

Hive built-in function summary

1. Related help operation functions View built-in functions: Show functions; Display function details: desc function ABS; Display function extension information: desc function extended concat; 2. Learn the ultimate mental method of built-in function Step 1: carefully read all the functions of the show functions command to establish an overall understanding and impression Step 2: use […]