使用plugins讓打包更便捷

以前運行dist下的js，都是手動把index.html拷貝過去的，每次把dist文件夾刪除，都須要將index.html拷貝進去，這樣很麻煩，咱們在webpack官方插件中找到 HtmlWebpackPlugin

module.exports = { 　　/** 　　* 打包模式，不配置會警告，但底層仍是會去配置默認的，就是production 　　* production: 壓縮模式，被壓縮的代碼 　　* development: 開發模式，不壓縮的代碼 　　* 　　*/ 　　mode: 'development', 　　// 這個文件要作打包，從哪個文件開始打包
　　entry: './src/index.js', 　　plugins: [new HtmlWebpackPlugin()], 　　// 打包文件要放到哪裏去，就配置在output這個對象裏
　　output: { 　　　　// 打包好的文件名字
　　　　filename: 'bundle.js', 　　　　/** 　　　　* 打包出的文件要把他放到哪個文件夾下，path後面要放一個絕對路徑 　　　　* __dirname指的是webpack.config.js所在的當前目錄的這個路徑 　　　　* 下面這個結合就是一個絕對路徑 　　　　*/ 　　　　path: path.resolve(__dirname, 'dist') 　　} }

這樣配置好，再去打包，發現會自動生成一個index.html，

index.html

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Webpack App</title>
　　</head>
<body>
　　<script type="text/javascript" src="bundle.js"></script></body>
</html>

html裏面還引入了bundle.js。並且在src裏面我並無這個index.html.這就是webpack裏面插件的做用javascript

HtmlWebpackPlugin這個插件能幹什麼呢？ HtmlWebpackPlugin會在打包結束後，自動生成一個html文件，並把打包生成的js自動引入到這個html文件中

咱們再打開index.html，發現網頁上什麼也沒有。爲何呢？

咱們看本身的代碼邏輯

index.js

var root = document.getElementById('root'); import './index.scss'; root.innerHTML = '<div class="iconfont iconfangdajing">abc</div>';

代碼邏輯是找到id爲root到節點，再把abc掛在到root上。可是咱們看index.html並無root這個標籤。因此說明用webpack生成到這個html，少了一個id爲root的標籤。那我想讓他自動生成這個id爲root的標籤，怎麼辦，能夠對這個html-webpack-plugin作一個配置

plugins: [new HtmlWebpackPlugin({ 　　template: 'src/index.html' })],

而後在src裏面本身寫一個模版index.html

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>html template</title>
　　</head>
　　<body>
　　　　<div id='root'></div>
　　</body>
</html>

而後運行npm run bundle，打開自動生成的html

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>html template</title>
　　</head>
　　<body>
　　　　<div id='root'></div>
　　　　<script type="text/javascript" src="bundle.js"></script>
　　</body>
</html>

能夠驚訝的看到id爲root的標籤插入進去了。這是爲何呢？css

html-webpack-plugin會自動生成一個html，這個html是以哪一個模版生成的呢，是src下面的index.html爲模板生成的。生成以後，會把打包出來bundle.js注入到html中。

經過這個例子，咱們說明一下webpack中plugin的做用。

plugin能夠在webpack運行到某個時刻的時候，幫你作一些事情。這個很像生命週期函數的定義。這個時刻是什麼時刻呢，就是webpack打包結束的時刻。其它的插件也會在某些時刻作一些事情，好比剛打包的時刻。好比打包js的某個時刻。再舉個例子。。

咱們如今打包好的名字叫bundle.js，如今我改一下，叫作dist.js

output: { 　　filename: 'dist.js', 　　path: path.resolve(__dirname, 'dist') }

而後從新打包，而後dist目錄下會多出一個dist.js文件，html裏面自動引入的也是dist.js文件。可是咱們看bundle.js的文件依然存在，爲何呀，一個是咱們剛纔沒有刪除dist，再打包，但每次打包都須要刪除一下，會很麻煩。 咱們但願每次打包的時候，自動將dist刪除，這樣就不會有上次遺留的東西了。如今就須要另一個插件，在官網webpack下找不到，叫作clean-webpack-plugin

先安裝

npm install clean-webpack-plugin -D

裝好以後，咱們去增長配置

plugins: [
　　new HtmlWebpackPlugin({ 　　　　template: 'src/index.html' 　　}), new CleanWebpckPlugin()
],

這個意思是在打包以前先刪除掉dist這個文件夾。這樣運行npm run bundle，以前bundle.js就不在了。