html-webpack-plugin

webpack 配置多页面应用

引用

const HtmlWebpackPlugin = require('html-webpack-plugin')

webpack.config.js 配置

entry: { //入口文件（这是多页面配置）
    index: './src/index.js',   //index页面入口
    pageOne: './src/pages/pageOne.js'   //pageOne页面入口
},

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].js',
}

plugins: [
    new HtmlWebpackPlugin({
      chunks: ['index'], // 用来指定生成的html文件需要包括哪些入口文件，如不设置则所以入口JS文件都会被引入进来
      filename: 'index.html', // 配置输出文件名和路径
      template: 'src/index.html', // 配置文件模板
    }),

    new HtmlWebpackPlugin({
      chunks: ['pageOne'],
      filename: 'pages/pageOne.html', // 配置输出文件名和路径
      template: 'src/pages/pageOne.html', // 配置文件模板
    }),

    new ExtractTextPlugin('[name].css')
]