webpack环境优化

一、开发环境优化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的回调函数

二、生产环境优化1、去除没有用到的js代码 webpack自带的tree-shaking在打包时可自动帮我们去除实际上没有使用的js代码，但是必须满足以下使用条件：

a、必须使用es6模块化开发
b、打包mode使用production模式

2、去除没有用到的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})
        })
    ]
}