Webpack(系列三)：熱模塊更新和使用 Babel處理 ES6語法

熱模塊更新

爲何要用熱模塊更新呢？

好比，我作了css樣式的修改，當我想要在不刷新當前頁面html的前提下，讓樣式渲染出來，就須要用到熱模塊更新了，相關配置:

在webpack.config.js文件中，對devServer和plugins進行配置

const webpack = require('webpack')	// 移入webpack 在plugins中須要用到它的熱模塊加載方法
module.exports = {    
	devServer:{
        open:true,
        contentBase:'./dist',
        port:8888,
        hot:true,       // 熱加載
        hotOnly:true,   // 即便html不生效，我也不讓它刷新頁面
    },
    plugins:[
        // 使用熱模塊更新方法
        new webpack.HotModuleReplacementPlugin()
    ],
}
複製代碼

使用 Babel處理 ES6語法

有些時候，像一些低版本瀏覽器是不能識別咱們的ES6語法的，控制檯會直接提示報錯了，那麼咱們出於兼容的考慮，就須要作不少兼容性代碼了，是否是很麻煩？

而經過配置webpack中的Babel,就給咱們帶來了很大的遍歷，他能夠自動把咱們書寫的ES6語法轉換成瀏覽器可識別的語言，怎麼進行配置呢？

1.對業務代碼進行打包轉換

首先下載依賴：

npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev	// 對es6語法進行轉換
npm install --save @babel/polyfill			// 對語法進行補全
複製代碼

而後在webpack.config.js中進行配置

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options:{
                    presets: [['@babel/preset-env',{
                        // 自動識別當前代買須要補全的語法，而不是所有引入，
                        // 大大減小了打包後的體積
                        useBuiltIns:'usage'
                    }]]
                }
            }
        ]
    },
複製代碼

在你當前書寫js的文件最頂部引入abel/polyfill

import "@babel/polyfill"
複製代碼

2. 對於本身開發的第三方模塊或者ui組件庫時，另外一種方式更加合理，不會污染全局變量

• 首先下載依賴：

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

npm install --save @babel/runtime

npm install @babel/runtime-corejs2 --save
複製代碼

• 在當前項目根目錄下建立 .babelrc文件,複製如下代碼

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}
複製代碼