Webpack 4.X webpack.config.js 檔案配置(一)
通過上一篇文章,我們明白了webpack
的兩個配置引數入口與出口,webpack
會找到入口檔案的地址,進去後一頓蹂躪,再通過你給的輸出地址就把編譯後的檔案給你了。這篇文章接著去豐富webpack.config.js
的內容,說一個引數叫plugins
plugins
plugins
裡面放的是外掛,在webpack
裡有各式各樣的外掛能夠幫你完成任何構建的事情。只有你想不到的,沒有它做不到的。並且全世界的小夥伴們都在給webpack
貢獻開源的外掛,所以外掛的種類是非常豐富的。
外掛能做什麼
外掛的作用在於提高開發效率,能夠解放雙手,讓我們去做更多有意義的事情。一些很low的事就統統交給外掛去完成。比如在webpack
編譯打包後,我們需要新建一個index.thml
,以及在頁面裡通過script
標籤去引入生成的js檔案,那這些傻瓜式的,浪費精力的事情就應該交給外掛自動完成,這就是所謂的自動化。我們只需要關注功能如何實現、去做一些有意義的事件即可。
外掛的難點不在於plugins
引數如何去用,而在於外掛本身如何去用。因為每個外掛的功能不一樣,所需的配置引數也不同。要用這個外掛需要按它的要求來寫引數,所以沒有一套統一的規格,這就要求大家善於去看外掛的API,通過webpack官網或者github
都能找到外掛說明。
html-webpack-plugin
下面就以這個html-webpack-plugin
html
頁面,既可以生成單個頁面又可以生成多個頁面,並且在生成前你可以給它一堆的配置,它會按照你想要的生成方式去生成頁面。
小試牛刀
第一步:安裝
npm i html-webpack-plugin -D
第二步:在webpack.config.js
裡引入模組
const HtmlWebpackPlugin=require('html-webpack-plugin');
第三步:在plugins
裡new
一個
plugins:[
new HtmlWebpackPlugin()
]
此時webpack.config.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); module.exports={ entry:{ one:'./src/1.js', two:'./src/2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:'[name].bundle.js' }, plugins:[ new HtmlWebpackPlugin() ] }
1.js
的內容如下:
console.log('這是第一個入口檔案');
2.js
的內容如下
console.log('這是第二個入口檔案!');
第四步:在終端裡執行命令webpack
,如果不出意外的話是下面這樣:
這個就代表已經成功了,在專案目錄裡會自動生成一個dist
目錄,裡面包含一個index.html
及一個one.bundle.js
和一個two.bundle.js
。開啟index.html
的原始碼,你能看到已經自動添加了兩個script
標籤分別引入了兩個js檔案。
鋒芒必露
接著要演示html-webpack-plugin
的配置引數,加上這些引數後,頁面就會變得酸爽動人!
1、建立模板
在src
目錄下建立一個template.html
做為模板檔案,程式碼如下:
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <!--這是個模板檔案,title裡的語法是為了能解析配置引數裡title對應的值--> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="box">這是自帶的div</div> </body> </html>
2、修改配置檔案
在webpack.config.js
裡修改plugins
如下:
plugins:[
new HtmlWebpackPlugin({
title:'陳學輝', /*這個值對應html裡的title*/
template:'./src/template.html', //模板檔案地址 filename:'test1.html', //檔名,預設為index.html(路徑相對於output.path的值) inject:true, //script標籤的位置,true/body為在</body>標籤前,head為在<head>裡,false表示頁面不引入js檔案 hash:true, //是否為引入的js檔案新增hash值 chunks:['one'], //頁面裡要引入的js檔案,值對應的是entry裡的key。省略引數會把entry裡所有檔案都引入 //excludeChunks:['one'],//頁面裡不能引入的js檔案,與chunks剛好相反 minify:{ //html-webpack-plugin內部集成了html-minifier collapseWhitespace:true, //壓縮空格 removeAttributeQuotes:true, //移除引號 removeComments:true, //移除註釋 }, }), //生成兩個檔案,分別引入兩個js檔案(現在是一個檔案裡引入了兩個js) new HtmlWebpackPlugin({ title:'kaivon', template:'./src/template.html', hash:true, filename:'test2.html', chunks:['two'] }) ]
刪掉dist
目錄,並在終端再次執行webpack
命令。此時會在專案的根目錄下生成一個dist
檔案,目錄如下:
此時以test1.html
為例開啟原始碼,應該是下面這個樣子
關於html-webpack-plugin
外掛的其它配置引數請參考:https://github.com/jantimon/html-webpack-plugin
clean-webpack-plugin
在用HtmlWebpackPlugin
的時候時需要把dist
目錄刪掉再去看生成的檔案,這個也屬於傻瓜式的操作,clean-webpack-plugin
這個外掛就可以做這件事情
第一步:安裝
npm i clean-webpack-plugin -D
第二步:在webpack.config.js
裡引入模組
const CleanWebpackPlugin=require('clean-webpack-plugin');
第三步:在plugins
的 最上面 new一個
plugins:[
new CleanWebpackPlugin(['./dist']), //這個一定要放在最上面,作用是先刪除dist目錄再建立新的dist目錄。裡面的引數為要刪除的目錄,放在一個數組裡面
...
]
在資料夾裡開啟dist
所在的目錄,並在終端裡再次執行命令webpack
後,會看到dist
目錄先被刪除後又被建立。
關於clean-webpack-plugin
外掛的所有配置引數請參考:https://github.com/johnagan/clean-webpack-plugin
原文地址:http://blog.51cto.com/13258913/2153286