Multi-application packaging

Configure multiple exits

entry: {

    index: './src/index.js'.

    about:'./src/about.js'

  },

Copy the code

Multiple export

output: {

    filename: 'js/[name].js'.

    path: path.resolve(__dirname, 'dist')

  },

Copy the code

• [name]On behalf ofindexandabout

Create a new about.html, about.js file in the SRC directory

Generate multiple HTML files

new HtmlWebpackPlugin({

      title: 'home'.

      minify: false.

      filename:'index.html'.

      template: path.resolve(__dirname, 'src/index.html'),

      chunks: ['index']

    }),

    new HtmlWebpackPlugin({

      title: 'about'.

      minify: false.

      filename:'about.html'.

      template: path.resolve(__dirname, 'src/about.html'),

      chunks: ['about']

    })

Copy the code

• “Chunks” : represents the name of the entry file that will automatically import the corresponding JS file

• Generate multiple CSS files, and the corresponding HTML files import the corresponding CSS files

  new MiniCssExtractPlugin({

        filename: "css/[name].css".

        chunks: ['index']

      }),

      new MiniCssExtractPlugin({

        filename: "css/[name].css".

        chunks: ['about']

      }),

Copy the code

• chunks: indicates the name of the entry file, which will automatically import the corresponding CSS file

Clean up the dist folder every time you pack

❝

In the actual development, we need to constantly adjust the code and modify, and we will continue to package. Every time, new files will be generated, resulting in a large number of files in the Dist directory, so we need to clear a dist folder before packaging

❞

• Install yarn add clean-webpack-plugin -d

• Use, put into the folder that needs to be cleaned

  const CleanWebpackPlugin = require("clean-webpack-plugin");

  

.

  plugins:[

      new CleanWebpackPlugin(["dist"])

  ]

Copy the code