Try webpack 01

1. Project generation

npm init
// Create webpack.dev.js for the development environment
// Create webpack.production.js for the production environment
Copy the code

2, configuration,

1. Entry File entry

  entry: "./src/index.js".// Single entry bit string
  entry: {
    index: "./src/index.js".search: "./src/search.js",},// Multiple entries are writes to object key-value pairs
Copy the code

2. Output Output file

  output: {
    path: path.join(__dirname, "dist"), // Output folder dist directory
    filename: "[name].js".// The packaged file name
  },
Copy the code

3. Module Configuration

 const path = require("path");
 module: {
    rules: [
       / / js packaging
      {
        test: /.js$/.// The end of the matched file
        use: "babel-loader"./ / loaders
      },
       / / CSS packaging
      {
        test: /.css$/,
        use: ["style-loader"."css-loader"].// the style-loade loader adds its style to the tag and does not output the.css file separately
      },
       / / less packaging
      {
        test: /.less$/,
        use: ["style-loader"."css-loader"."less-loader"],},// Package images
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: "url-loader".options: {
              limit: 10240.If the value is smaller than 10K, the base64 format is displayed}},],},// Package fonts
      {
        test: /.(woff|wof2|eot|ttf|otf)$/,
        use: "file-loader",}]},Copy the code

4. Plugin

  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  plugins: [
  
    new MiniCssExtractPlugin({
      filename: "[name]_[contenthash:8].css".// Output a separate.css file while the Loader module needs to be changed
      // 
      / / {
      // test: /.css$/,
      // use: [MiniCssExtractPlugin.loader, "css-loader"],
      / / separate output conflict with style - loader. So switch to MiniCssExtractPlugin loader
      // },
      / / {
      // test: /.less$/,
      // use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      // },
    }),
    new OptimizeCss({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require("cssnano"),}),// Compress the output CSS file
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/search.html"),
      filename: "search.html".inject: true.chunks: ["search"].minify: {
        html5: true.collapseWhitespace: true.preserveLineBreaks: false.minifyCSS: true.minifyJS: true.removeComments: false,}}),// Compress the output HTML file
  ]
Copy the code

Hash File Fingerprint

// Output file name:
output: {
    path: path.join(__dirname, "dist"), // Output folder dist directory
    filename: "[name]_[chunkhash:8].js".// The packaged file name
},
// Font and file name:
{
    test: /.(png|jpg|gif|jpeg)$/,
    use: [
      {
        loader: "file-loader".options: {
          name: "[name]_[hash:8][ext]",},},],}, {test: /.(woff|wof2|eot|ttf|otf)$/,
    use: [
      {
        loader: "file-loader".options: {
          name: "[name]_[hash:8][ext]",},},],},// CSS style name
new MiniCssExtractPlugin({
  filename: "[name]_[contenthash:8].css",}).Copy the code

Hot hot update

  / / package. Json file
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack --config webpack.production.js"."watch": "webpack --watch"."dev": "webpack-dev-server --config webpack.dev.js --open"
  },
  / / webpack. Dev. Js file
  const webpack = require("webpack");
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    contentBase: "./dist".hot: true,},Copy the code

Another way:

Mode environment

  mode: "development|production".Copy the code

Package depends on installation

 "devDependencies": {
    "@babel/core": "^ 7.14.6"."@babel/preset-env": "^ 7.14.7"."@babel/preset-react": "^ 7.14.5"."babel-loader": "^ 8.2.2"."css-loader": "^ 5.2.6." "."cssnano": "^ 4.1.10"."file-loader": "^ 6.2.0"."html-webpack-plugin": "^ 5.0.0"."less": "^ 4.4.1"."less-loader": "^ 10.0.1." "."mini-css-extract-plugin": "^ 2.1.0." "."optimize-css-assets-webpack-plugin": "^ the 6.0.1." "."react": "^ 17.0.2"."react-dom": "^ 17.0.2"."style-loader": "^ 3.0.0"."url-loader": "^ 4.4.1"."webpack": "^ 5.1.3"."webpack-cli": "^" 3.3.12."webpack-dev-server": "^ 3.11.2"
  }
Copy the code

Specifically: there may be incompatibilities between different plug-ins and different versions, leading to packaging failure. This is not a configuration problem. I have tested the version here and found no problem

// Github address:Github.com/838216870/w…