【webpack4.0】---webpack的基本使用(二)

1、什麼是plugins

plugins可使webpack在運行到某個時刻的時候，幫你作一些事情，相似於生命週期同樣

plugins，它就是一個擴展器，它豐富了wepack自己，針對是loader結束後，webpack打包的整

個過程，它並不直接操做文件，而是基於事件機制工做，會監聽webpack打包過程當中的某些節點

 

2、html-webpack-plugin

一、安裝

cnpminstallhtml-webpack-plugin-D

二、做用

會在打包結束後，自動生成一個html文件，並把打包生成的js自動引入到這個html中，同時還能夠配合配置項的chunks實現多頁面開發

三、基本使用

plugins:[
   newHtmlWebpackPlugin({
       filename:"index.html",
       template:"./index.html",
       inject:"head",
       chunks:["app"],
       minify:{
           removeComments:true,
           collapseWhitespace:true   
      }
  })
]

• filename:打包後生成html的文件名稱

• template:使用的模板

• inject:JS在頁面的哪一個部分引入

• chunks:指定引入的JS文件

• minify:壓縮html文件

• removeComments:刪除註釋

• collapseWhitespace:刪除空格

• favicon:圖標

 

3、clean-webpack-plugin

一、安裝

cnpminstallclean-webpack-plugin-D

二、做用

在咱們每次打包的時候會從新生成一個dist文件，相似於先將上一次的dist文件刪除，而後在從新生成一個dist目錄

 

三、基本使用

constCleanWebpackPlugin=require("clean-webpack-plugin");

module.exports={
   plugins:[
       newCleanWebpackPlugin(["dist"])
  ]
}

參數是一個數組，值爲須要刪除的目錄，在打包的時候會經過clean-webpack-plugin將dist目錄刪除

 

4、extract-text-webpack-plugin

一、安裝

cnpminstall-Dextract-text-webpack-plugin@next

 

二、做用

該插件的主要是爲了抽離css樣式,防止將樣式打包在js中引發頁面樣式加載錯亂及JS文件過大等的現象

 

三、基本使用

constExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
   module:{
       rules:[
      {
             test:/\.(css|scss)$/,
             use: ExtractTextPlugin.extract({
                 //編譯後用什麼loader來提取css文件
                   fallback: "style-loader", 
                // 指須要什麼樣的loader去編譯文件,這裏因爲源文件是.css因此選擇css-loader
                   use:["css-loader","sass-loader"]
          })
      },
      ]  
  },
   plugins:[
        newExtractTextPlugin("css/[name].css")
    //或者
        newExtractTextWebpackPlugin({
                 filename: '[name].[hash:8].css',
                 allChunks: true
        }),
  ]
}

 

5、HotModuleReplacementPlugin(問題)

一、安裝

cnpm install webpack -D

 

二、做用

啓用熱模塊更換，也稱爲HMR。

永遠不要在生產環境( production )下啓用 HMR

主要用來當代碼產生變化後，能夠在不刷新遊覽器的狀況下對局部代碼塊進行替換更新。這在不少狀況下都頗有用，例如在處理彈出框時，使用HMR能夠及時的看到變化，若是用刷新遊覽器的方式會回到初始頁面。

三、基本使用

plugins: [
        new webpack.HotModuleReplacementPlugin(), //熱更新！
 ]

 飛機票：https://mp.weixin.qq.com/s?__biz=MzU3NjY4MzQ1Mw==&mid=100000155&idx=1&sn=a59ecda959ae4622658b07407123919d&scene=19#wechat_redirect