webpack学习之webpack的多入口和多出口配置

webpack的多入口多出口配置

// webpack.prod.js文件配置

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin');

let {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  mode: 'production', // 打包环境（生产环境）
  // 多入口时，entry的值是一个对象
  entry: {
    // 属性名是打包后生成的js文件名，属性值是入口文件
    index: './src/index.js',
    a: './src/a.js',
  },
  output: {
    // filename: 'prod.[hash:6].js', // 单出口
    filename: '[name].js', // 对应着多入口的属性名[name]，这里 [name]是一个变量
    // 打包后生成两个js文件：index.js 和 a.js
    path: path.resolve(__dirname, 'prod'),
    // 将打包后的文件都存放在根目录下的prod文件夹中
  },
  plugins: [
  
    new CleanWebpackPlugin(), // 清除之前打包生成的文件
    // 按照模板生成新的html文件的同时引入指定的js文件
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的html文件名
      template: './public/index.html', // 模板html
      chunks: ['index'], // 指定生成的html文件引入的是哪些js文件
      minify: false,  // 是否压缩，生产环境默认就是压缩的
    }),
    new HtmlWebpackPlugin({
      filename: 'other.html',
      template: './public/other.html',
      chunks: ['a', 'index'], // 多入口时，指定该新的html引入的是哪个js文件,不写的话默认都引入，这里引入a.js和index.js文件
      minify: false, //不压缩，因为生产环境默认是压缩的
    }),
  ]
}

打包后的项目结构

这里我是把配置写在了webpack.prod.js文件中，所以需要去packag.json中配置，然后运行 npm run server 即可