修改的webpack配置文件

全局配置

修改 webpack.base.conf.js

打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口

entry: {    app: './src/main.js',    app2: './src/main2.js',    app3: './src/main3.js',},

运行、编译的时候每一个入口都会对应一个Chunk

run dev 开发环境

修改 webpack.dev.conf.js

打开 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

chunks: ['app']中的app对应的是webpack.base.conf.js中entry设置的入口文件

plugins:[    // https://github.com/ampedandwired/html-webpack-plugin    // 多页:index.html → app.js    new HtmlWebpackPlugin({      filename: 'index.html',//生成的html      template: 'index.html',//来源html      inject: true,//是否开启注入      chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源    }),    // 多页:index2.html → app2.js    new HtmlWebpackPlugin({      filename: 'index2.html',//生成的html      template: 'index2.html',//来源html      inject: true,//是否开启注入      chunks: ['app2']//需要引入的Chunk，不配置就会引入所有页面的资源    }),    // 多页:index3.html → app3.js    new HtmlWebpackPlugin({      filename: 'index3.html',//生成的html      template: 'index3.html',//来源html      inject: true,//是否开启注入      chunks: ['app3']//需要引入的Chunk，不配置就会引入所有页面的资源    })]

run build 编译

修改 config/index.js

打开~\config\index.js，找到build下的index: path.resolve(__dirname, '../dist/index.html')，在其后添加多页

build: {    index: path.resolve(__dirname, '../dist/index.html'),    index2: path.resolve(__dirname, '../dist/index2.html'),    index3: path.resolve(__dirname, '../dist/index3.html'),},

修改 webpack.prod.conf.js

打开~\build\webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 build

plugins: [    // 多页:index.html → app.js    new HtmlWebpackPlugin({        filename: config.build.index,        template: 'index.html',        inject: true,        minify: {            removeComments: true,            collapseWhitespace: true,            removeAttributeQuotes: true            // more options:            // https://github.com/kangax/html-minifier#options-quick-reference        },        // necessary to consistently work with multiple chunks via CommonsChunkPlugin        chunksSortMode: 'dependency',        chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就会引入所有页面的资源    }),    // 多页:index2.html → app2.js    new HtmlWebpackPlugin({        filename: config.build.index2,        template: 'index2.html',        inject: true,        minify: {            removeComments: true,            collapseWhitespace: true,            removeAttributeQuotes: true        },        chunksSortMode: 'dependency',        chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就会引入所有页面的资源    }),    // 多页:index3.html → app3.js    new HtmlWebpackPlugin({        filename: config.build.index3,        template: 'index3.html',        inject: true,        minify: {            removeComments: true,            collapseWhitespace: true,            removeAttributeQuotes: true        },        chunksSortMode: 'dependency',        chunks: ['manifest','vendor','app3']//需要引入的Chunk，不配置就会引入所有页面的资源    }),]

参考:

如果页面比较多，可以考虑使用循环将 HtmlWebpackPlugin 添加到 plugins

// utils.jsexports.getEntry = function(globPath, pathDir) {    var files = glob.sync(globPath);    var entries = {},        entry, dirname, basename, pathname, extname;    for (var i = 0; i < files.length; i++) {        entry = files[i];        dirname = path.dirname(entry);        extname = path.extname(entry);        basename = path.basename(entry, extname);        pathname = path.join(dirname, basename);        pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;        entries[pathname] = ['./' + entry];    }    return entries;}

// webpack.base.conf.jsvar pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));pages.forEach(function (pathname) {    // https://github.com/ampedandwired/html-webpack-plugin    var conf = {        filename: '../views/' + pathname + '.html', //生成的html存放路径，相对于path        template: '../src/views/' + pathname + '.html', //html模板路径        inject: false,    //js插入的位置，true/'head'/'body'/false        /*         * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，         * 如在html标签属性上使用{
   {...}}表达式，所以很多情况下并不需要在此配置压缩项，         * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。         * 为避免压缩html，需要在html-loader上配置'html?-minimize'，见loaders中html-loader的配置。         */        // minify: { //压缩HTML文件        //     removeComments: true, //移除HTML中的注释        //     collapseWhitespace: false //删除空白符与换行符        // }    };    if (pathname in config.entry) {        conf.favicon = 'src/images/favicon.ico';        conf.inject = 'body';        conf.chunks = ['vendors', pathname];        conf.hash = true;    }    config.plugins.push(new HtmlWebpackPlugin(conf));});

同样入口 entry 也可以使用

// webpack.base.conf.jsentry: {    app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')},