plugins:[ // ... 省略 // 这是原有的配置项，用于匹配注入app.js的输出脚本 new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', chunks: ['app'], // 与原配置的不同的是要用chunks指定对应的entry inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }), // 这是新增项，用于匹配注入admin.js的输出脚本 new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'admin.html' : config.build.admin, template: 'index.html', chunks: ['admin'], inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }), ]
需要强调一点的是，这里的HtmlWebpackPlugin配置必须用chunks指定在上文entry内对应的入口文件的别名。
关于HtmlWebpackPlugin更多配置内容可以参考：。
还有就是得将同样的配置加入到生产环境专用的webpack配置文件webpack.prod.conf.js中，否则当我们运行npm run build时是不会输出admin.js和admin.html这两个入口文件的（由于配置内容相同这里就不再重复了）。
最后，如果使用了vue-router就得对connect-history-api-fallback插件的配置进行修改，否则原有的默认配置只会将所有的请求转发给index.html，这样就会导致History API没有办法正确地将请求指向admin.html，导致热加载失败，具体做法如下所述。
打开dev-server.js文件，将app.use(require('connect-history-api-fallback')())配置改为以下的方式：
// handle fallback for HTML5 history API var history = require('connect-history-api-fallback') // app.use(require('connect-history-api-fallback')()) app.use(history({ rewrites: [ { from: /^\/admin\/.*$/, to: '/admin.html' } ] }));
新入口需要有明确区分的路由规则，否则还是会产生热加载失败的情况，这样就非常不便于开发了。
总结
以上所述是小编给大家介绍的脚手架vue-cli工程webpack的基本用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: