webpack:index.html模板配置
webpack之Index.html模板配置
1、单页面环境搭建
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
plugin: [
new HtmlWebpackPlugin({
title:'多页面应用',
template: './index.html'//模板
inject: 'body'//将生成的script标签应该放到什么位置
})
],
entry: {
main: {
import: ['./src/app.js', './src/app.js'],
dependOn: 'lodash'
},
main2: {
import: './src/app3.js',
dependOn: 'lodash'
},
lodash: 'loadsh'
}
}
在index.html文件中
//会自动找到配置的title
<title><%= htmlWebpackPlugin.options.title %></title>
2、多页面环境搭建
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
plugin: [
new HtmlWebpackPlugin({
title:'多页面应用',
template: './index.html'//模板的含义即对应的html文件
inject: 'body'//将生成的script标签应该放到什么位置
filename: 'chanel1/index.html',//打包生成的文件名称
chunks: ['main','lodash'],//在这个文件有哪些模块是需要载入的
publicPath: 'http://www.a.com/'//载入文件添加的前缀
}),
new HtmlWebpackPlugin({
template: './index2.html'//模板的含义即对应的html文件
inject: 'body'//将生成的script标签应该放到什么位置
filename: 'chanel2/index2.html',//打包生成的文件名称
chunks: ['main2','lodash'],//在这个文件有哪些模块是需要载入的
publicPath: 'http://www.b.com/',//载入文件添加的前缀
})
],
//入口文件
entry: {
main: {
import: ['./src/app.js', './src/app.js'],
dependOn: 'lodash',
filename: 'chanel1/[name].js'//打包生成的文件名称
},
main2: {
import: './src/app3.js',
dependOn: 'lodash',
filename: 'chanel2/[name].js'//打包生成的文件名称
},
lodash: {
import: 'lodash',
filename:'common/[name].js'//打包生成的文件名称
}
}
}
当有两个html页面的时候,在配置的时候要指定打包生成的文件名称,若不指定则会发生文件名冲突的问题
3、webpack之sideEffects
package.json文件中配置下面的一个属性
{
"sideEffects" : ['*.css']//这个选项告诉webpack只要看到css文件都是有副作用的,你就不要删除了,sideEffects的取值有三种形式:false,true以及数组形式
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiacicf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22