html中引入script,如果是hash或者chunkhash生成的js,则src每次都要修改,避免修改的方法就是用webpack的插件:
1、安装webpack插件:
终端项目目录输入:npm install html-webpack-plugin --save-dev
2、配置文件中建立对插件的引用
webpack.config.js中
(1)引用插件
var htmlWebpackPlugin=require('htmll-webpack-plugin');
(2)以index.html为模板
设置plugins:[
new htmlWebpackPlugin()// 初始化插件
]
这里的代码只会让webpack自动生成一个index.html,里面自动把js代码插入到index.html当中。//注意,这里说的是webpack生成的index.html,不是你自定义的index.html。
要想让生成的index.html是自定义的,那么就要设置
plugins:[
new htmlWebpackPlugin({
template: ‘index.html’,//这里的index.html就是根目录下的index.html文件,是你自己写的文件。
filename: ‘index-[hash].html’,//这里指定的是生成的文件的名字
inject: 'body’,// 这里可以指定js文件是放在head还是body标签里面具体还可以放哪,请看文档说明。https://github.com/jantimon/html-webpack-plugin#configuration
})// 初始化插件
]
(4)webpack使用插件的地址是根据配置里的context,上下文来决定的。
(5)文件生成在dist下,而不是一直在js下
output:{
path:path.resolve(__dirname,'./dist'),
filename:'js/[name]-[chunkhash].js'//js文件生成到js文件夹中
},
关于webpack的笔记2
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...