关于webpack的笔记2

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文件夹中
},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,735评论 7 110
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,275评论 7 35
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,363评论 0 5
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,536评论 1 32
  • 重写Cell中的drawRect - (void)drawRect:(CGRect)rect {CGContext...
    地选之猿阅读 924评论 0 51