webpack環境優化

1、開發環境優化
HMR(Hot Module Replacement模塊熱替換)--是webpack提供的最有用的功能之一，它容許在運行時更新各類模塊，而無需進行徹底刷新。

開啓方法：在webpack.config.js中的devServer中加入hot參數--只能監聽js文件的變化。

devServer: {
    port: 8080,     /*指定端口*/
    compress: true, /*開啓自動壓縮*/
    open: true,     /*自動打開瀏覽器*/
    hot: true       /*開啓模塊熱替換*/
}

監聽html文件的改變，因htmL沒有HMR功能，只須要在entry入口中引入html文件就行。

entry: ['./index.js','./index.html']

對於樣式的HMR功能，在開發環境中使用style-loader就行（打包時替換成mini-css-extract-plugin就行）

module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader','css-loader','postcss-loader']    
        }
    ]
}

js也是默認沒有HMR功能，所以只能處理非入口文件的js文件，解決辦法：
啓動hot後，module.hot接口就會暴露在index.js中，只須要在index.js中配置，告訴webpack接受HMR的模塊就能夠了。

if(module.hot){ /*告訴webpack接受熱替換的模塊*/
    module.hot.accept('./[被監聽的js的路徑]',()=>{})
}

服務器檢測到了js代碼的變化就會執行module.hot.accept的回調函數

2、生產環境優化
一、去除沒有用到的js代碼
webpack自帶的tree-shaking在打包時可自動幫咱們去除實際上沒有使用的js代碼，可是必須知足如下使用條件：

a、必須使用es6模塊化開發
b、打包mode使用production模式

二、去除沒有用到的css代碼
使用purgecss-webpack-plugin插件可去除無用css,經過mini-css-extract-plugin使用
a、安裝

npm i purgecss-webpack-plugin -D

b、在webpack.config.js中配置

const (resolve,join) = require('path');
/*node中的path.resolve()能夠把一個路徑或片斷的序列解析爲一個絕對路徑，至關於cd操做*/
/*node中的path.join()能夠將路徑片斷使用特定的分隔符'/'連接起來，並規範化造成路徑*/
const glob = require('glob')  /*glob是node的全局對象*/
const PATHS = {src: join(__dirname,'src')}
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')  /*引入插件*/


module.exports = {
    entry: './src/xxx.js',
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        relus: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new PurgecssPlugin({
            paths:glob.sync(`${PATHS.src}/**/*`,{nodir:true})
        })
    ]
}