webpack入門筆記——熱替換

熱替換是什麼？

熱替換（HMR）,建立在 devServer 之上，開啟後瀏覽器可以自動重新整理，它會監聽入口檔案及其 import 進來的檔案是否修改，修改則重新打包（輸出到記憶體，不再生成檔案）並使瀏覽器重新整理

安裝

//安裝本地伺服器 
cnpm install  webpack-dev-server --save-dev
複製程式碼

配置

webpack.config.js

//引入依賴包
const webpack = require('webpack');

module.exports={
    devServer: {
        contentBase: './dist',
        hot: true
    },
    
    plugins:[
        //new webpack.NamedModulesPlugin(),//開發模式下不再需要配置，預設開啟
        new webpack.HotModuleReplacementPlugin()
    ]
}
複製程式碼

package.json

"scripts": {
    "start": "webpack-dev-server --open"
}
複製程式碼

執行

npm start
複製程式碼

注意事項

熱替換隻監聽入口檔案和相關檔案，所以想實現css修改後也自動重新整理頁面，必須使用 css-loader file-loader，讓css也被關聯上

1 . 安裝

cnpm install style-loader css-loader --save-dev
複製程式碼

2 . 配置

module: {
    rules: [{
        test: /\.css$/,
        use:["style-loader","css-loader"]
    }]
}
複製程式碼