Webpack（二）

Hot Module Replacement (HMR:热模块替换)

在vue或者react项目中，当修改某个值的话，页面不会自动刷新，单身页面中的值已经自动修改了。这就是HMR做到的。
注：项目中我发现MiniCssExtractPlugin.loader编译的css，如果抽离出来css就不会进行热更新。"style-loader"的可以热更新。

用法，启动hmr：只需添加hot:true和hotOnly:true 即可。

devServer: { 
    contentBase: "./dist",
    open: true,
    hot:true, 
    //即便HMR不生效，浏览器也不自动刷新，就开启hotOnly
    hotOnly:true 
},

HMR对css模板处理较好，处理js模块HMR不好。需要使用module.hot.accept来观察模块更新从而更新。用的时候可以自己使用框架里提供的热更新插件即可。

Babel处理ES6

官方网站：https://babeljs.io/
中文网站：https://www.babeljs.cn/

npm i babel-loader @babel/core @babel/preset-env -D
//babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作，这部分工作需要用到 @babel/preset-env来做 //@babel/preset-env里包含了es6转es5的转换规则

在index.js中添加一些es6的语法，比如：

const str = "";
const arr = [new Promise(() => {}), new Promise(() => {})];
arr.map(item => {
  console.log(item);
});

修改webpack.connfig.js,添加loader。

            {
                test: /\.js$/,
                //loader有顺序，从右到左，从下到上
                use: {
                    loader:"babel-loader",
                    //babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作
                    options:{
                    //@babel/preset-env里包含了es6转es5的转换规则,会把es6转成es5的工作.
                        "presets": ["@babel/preset-env"]
                    }
                }
            }

现在执行npx webapck 。可以看到打包出来的源码里面。const变成了var。 但是代码里的Promise有些低版本浏览器还是不会支持Promise。这个时候，我们需要额外的配置了，使用@babel/polyfill。它可以让低版本浏览器支持peomise。

@babel/polyfill

如何使用：@babel/polyfill。
按照@babel/polyfill

npm i @babel/polyfill -D

在index.js里头部引用

import "@babel/polyfill";

现在执行npx webpack就可以让编译出来的代码，就算使用了promise，依旧可以在低版本浏览器上跑了。
虽然能跑，但是还有一个问题。因为我们在index.js头部全部引用的 @babel/polyfill
打包后的index.js体积有1M，这么大。但是我们只需要兼容peomise，所以还需要修改成按需引用，这样可以大大的减少index.js的打包体积。
@babel/polyfill如何按需引用呢？做法如下：
修改loader中options选择里的presets字段。修改@babel/preset-env需要把@babel/preset-env改成数组。

            {
                test: /\.js$/,
                // 排除node_modules模板的转换
                exclude:/node_modules/,
                //loader有顺序，从右到左，从下到上
                use: {
                    loader:"babel-loader",
                    options:{
                        presets: [
                            ["@babel/preset-env",{
                                useBuiltIns:"usage",//按需加载
                                corejs:2 //因为使用了，所以需要指定一下版本。 我们注意到您使用的是“useBuiltIns”选项，而没有声明核心js版本。目前，当没有版本被传递时，我们假设版本2.x。由于这个默认版本可能会在Babel的未来版本中发生变化，我们建议通过“core js”选项显式设置您正在使用的核心js版本。
                            }]
                        ]
                    }
                }
            }

npx webpack 执行的时候，打包成功，提包体积是300kb。比之前小了很多。添加打包的时候有出息警告。让移除index.js中的import "@babel/polyfill";，因为使用按需加载，就不需要全局引入了。当需要的时候，就会自动加载。

@babel/plugin-transform-runtime

它不会造成全局污染

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

怎么使用？

//import "@babel/polyfill"; 
const arr = [new Promise(() => {}), new Promise(() => {})]; 
arr.map(item => { console.log(item); });

修改配置文件：注释掉之前的presets，添加plugins

            {
                test: /\.js$/,
                // 排除node_modules模板的转换
                exclude:/node_modules/,
                //loader有顺序，从右到左，从下到上
                use: {
                    loader:"babel-loader",
                    options:{
                        // presets: [
                        //     ["@babel/preset-env",{
                        //         useBuiltIns:"usage",//按需加载
                        //         corejs:2 //因为使用了，所以需要指定一下版本。 我们注意到您使用的是“useBuiltIns”选项，而没有声明核心js版本。目前，当没有版本被传递时，我们假设版本2.x。由于这个默认版本可能会在Babel的未来版本中发生变化，我们建议通过“core js”选项显式设置您正在使用的核心js版本。
                        //     }]
                        // ],
                        // 添加plugins
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            }

执行npx webpack 即可

useBuiltIns 选项是 babel 7 的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。 它有三个参数可以使用： 
①entry: 需要在 webpack 的入口文件里 import"@babel/polyfill" 一次。 babel 会根据你的使用情况导入垫片，没有使用的功能不会被导入相应的垫片。 
②usage: 不需要 import ，全自动检测，但是要安@babel/polyfill。（试验阶段） 
③false: 如果你 import "@babel/polyfill" ，它不会排除掉没有使用的垫片，程序体积会庞大。(不推荐)

扩展：.babelrc文件：

当webpack.config.js中的babel-loader的配置选项过多，过长的话，那就需要把这些配置选项放到专一的文件中。方便阅读和修改，显得代码整洁。
用法：
新建.babelrc文件，把options部分整体移入到该文件中，就可以了。主要json要用严格模式，而且不能有注释。
例如：

{
    "plugins": ["@babel/plugin-transform-runtime"]
}

npm run server执行打包的时候，当使用babel-loader的时候，babel-loader会自动检测根目录中是否有.babelrc文件,如果有的话，就使用这里面的配置信息。