webpack實踐筆記（三）--- 總結

webpack實踐筆記（三）--- 總結

loaders

須要單獨安裝而且在config文件中的modules下進行配置，配置參數有：

• test：匹配loaders處理的文件的拓展名的正則表達式（必須）

• loader：loader的名稱（必須），loader 通常以 xxx-loader 的方式命名，xxx 表明了這個 loader 要作的轉換功能，好比 css-loader。

• include：必須處理的文件（文件夾）（可選）

• exclude: 屏蔽不須要處理的文件（文件夾）（可選）

• query：爲loaders提供額外的設置選項（可選)

css-loader 和 style-loader區別

• css-loader實現讀取功能

• style-loader將全部的計算後的樣式加入頁面中

• 兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中

...
{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader'
}
// 感嘆號的做用在於使同一文件可以使用不一樣類型的loader
...

plugins

loaders和plugins是徹底不一樣的東西，loaders是在打包構建過程當中用來處理源文件的（js，scss，less..），一次處理一個，
插件並不直接操做單個文件，它直接對整個構建過程其做用。

HtmlWebpackPlugin

依據一個簡單的模板，生成最終的html文件，這個文件中自動引用了你打包後的js文件。
每次編譯都在文件名中插入一個不一樣的哈希值。

HMR

Hot Module Replacement容許你在修改組件代碼後，自動刷新實時預覽修改後的效果。
在webpack中實現HMR也很簡單，只須要作兩項配置:

• 在webpack配置文件中添加HMR插件

• 在Webpack Dev Server中添加「hot」參數

devServer: {
    hot: true,
    inline: true
},
plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.html"
    }),
    new webpack.HotModuleReplacementPlugin()
  ],