关于webpack: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})
        })
    ]
}