webpack4--熱更新

所謂熱更新，就是在瀏覽器能同步刷新你的代碼。webpack 熱更新依賴 webpack-dev-server。具體實現步驟如下：

1.局部安裝依賴 webpack-dev-server

npm install --save-dev webpack-dev-server

 

2.在 webpack.config.js 配置相關參數

const path = require('path'); //引入path
module.exports = {
    mode: 'development',
    entry: {
        index: path.join(__dirname, 'src/index.js'),
        signup:path.join(__dirname, 'src/signup.js'),
    },

    output: {
        //webpack4中的path默認值即為'./dist'，可不用設置
        path:path.join(__dirname, 'dist'), 
        filename: '[name].bundle.js',
    },
    
    devServer: {
        contentBase: path.join(__dirname, 'page'),
        compress: true,
        port: 8084
    }
}

更多的配置可查看：https://webpack.js.org/configuration/dev-server/

 

3.在package.json中的scripts對象中添加如下命令，用以開啟本地服務器：

"server": "webpack-dev-server --open"

 

4.執行 npm run server，安裝了淘寶鏡像就執行 cnpm run server

成功的話，終端顯示如下圖：

 

此時我們可以看到瀏覽器會自動打開 http://localhost:8084/

 

如果你想查看本地服務器下面的文件路徑，可以訪問http://localhost:8084/webpack-dev-server

我的就顯示如下圖：

 

此時你更改你項目里面的文件，刷新瀏覽器，可以實時看到你修改后的內容了。