8 多页面应用打包

多页面应用打包

1. 在webpack.config.js中修改入口和出口配置

  // 1. 修改为多入口
  entry: {
      main: './src/main.js',
      other: './src/other.js'
  },
  output: {
    path: path.join(__dirname, './dist/'),
    // filename: 'bundle.js',
    // 2. 多入口无法对应一个固定的出口, 所以修改filename为[name]变量
    filename: '[name].bundle.js',
    publicPath: '/'
  },
  plugins: [
      // 3. 如果用了html插件,需要手动配置多入口对应的html文件,将指定其对应的输出文件
      new HtmlWebpackPlugin({
          template: './index.html',
          filename: 'index.html',
          chunks: ['main']
      }),
      new HtmlWebpackPlugin({
          template: './index.html',
          filename: 'other.html',
          // chunks: ['other', 'main']
          chunks: ['other']
      })
  ]

修改入口为对象，支持多个js入口，同时修改output输出的文件名为'[name].js'表示各自已入口文件名作为输出文件名，但是html-webpack-plugin不支持此功能，所以需要再拷贝一份插件，用于生成两个html页面，实现多页应用.