webpack多页面配置
Author：[email protected] Date：
webpack，yeoman上面的构建 都是单页面应用
但是，我向多页面，不同入口地址进入，然后，就悲剧地无法访问：
只是，需要我们在entry：配置
entry:{
// index: './index.js',
app: './index.js',
comp:'./comp.js',
comp2:'./comp2.js'
},dist dev 环境都要加上
同时，out 输出；多文件输出！
output: {
path: path.resolve('./dist/assets'),
filename: '[name].js',
publicPath: './assets/'
},输出页面配置
每多一个html，就多new HtmlWebpackPlugin配置
new HtmlWebpackPlugin({
// 本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如比如 handlebars!src/index.hbs；
template: './src/index.html',
// 输出文件的文件名称，默认为index.html，不配置就是该文件名；
// 也可以为输出文件指定目录位置（例如'html/index.html'）
filename: './index.html',
chunks: ['index', 'vendor', 'commons', 'manifest'],
// 插入位置：
// 1、true或者body：所有JavaScript资源插入到body元素的底部
// 2、head: 所有JavaScript资源插入到head元素中
// 3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
inject: true,
// 是否将错误信息输出到html页面中
showErrors: true,
// 是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
hash: false,
// 添加特定的 favicon 路径到输出的 HTML 文件中。
favicon: '',
minify: {
// 移除注释,默认值false
removeComment: true,
// 压缩html内的样式,默认值false
minifyCSS: true,
/* // 清理内容为空的元素 默认值false
removeEmptyElements: false,
// 移除多余空格
collapseWhitespace: false,
// 压缩html内的js,默认值false
minifyJS: true,
// 区分大小写的方式处理自定义标签内的属性。默认值false,转成全小写
caseSensitive: false,
// 去掉style和link标签的type属性。默认值false
removeStyleLinkTypeAttributes: false */
}
})
转载本站文章《webpack多页面配置》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/7899.html