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為模板
設(shè)置plugins:[
new htmlWebpackPlugin()// 初始化插件
]
這里的代碼只會讓webpack自動生成一個index.html,里面自動把js代碼插入到index.html當(dāng)中。//注意,這里說的是webpack生成的index.html,不是你自定義的index.html。
要想讓生成的index.html是自定義的,那么就要設(shè)置
plugins:[
new htmlWebpackPlugin({
template: ‘index.html’,//這里的index.html就是根目錄下的index.html文件,是你自己寫的文件。
filename: ‘index-[hash].html’,//這里指定的是生成的文件的名字
inject: 'body’,// 這里可以指定js文件是放在head還是body標(biāo)簽里面具體還可以放哪,請看文檔說明。https://github.com/jantimon/html-webpack-plugin#configuration
})// 初始化插件
]
(4)webpack使用插件的地址是根據(jù)配置里的context,上下文來決定的。
(5)文件生成在dist下,而不是一直在js下
output:{
path:path.resolve(__dirname,'./dist'),
filename:'js/[name]-[chunkhash].js'//js文件生成到j(luò)s文件夾中
},
關(guān)于webpack的筆記2
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
推薦閱讀更多精彩內(nèi)容
- GitChat技術(shù)雜談 前言 本文較長,為了節(jié)省你的閱讀時間,在文前列寫作思路如下: 什么是 webpack,它要...
- 記得2004年的時候,互聯(lián)網(wǎng)開發(fā)就是做網(wǎng)頁,那時也沒有前端和后端的區(qū)分,有時一個網(wǎng)站就是一些純靜態(tài)的html,通過...
- 在現(xiàn)在的前端開發(fā)中,前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...