webpack4, babel-loader8, babel7綜合使用

安裝

npm install --save-dev babel-loader @babel/core @babel/preset-env webpack

使用

1. 安裝上面所示的插件，其中babel-loader是webpack的loader，用於打包時處理js文件，@babel/core是babel的核心功能，@babel/preset-env是babel預置的一系列轉換ECMAScript2015+的插件。但是有可能不會把你代碼中用到的所有特性都進行轉譯，這是可以通過@babel/polyfill來自動添加轉義需要的功能。

   npm install --save-dev @babel/polyfill

2. 修改webpack的配置文件

   moodule: [
   	rules: [
   		{
   			test: /\.m?js$/,
   			exclude: /(node_modules)|(bower_components)/,
   			use: {
   				loader: 'babel-loader',
   				options: {
   					presets: ['@babel-env']
   				}
   			}
   		}
   	]
   ]
   

   通過options選項可以將參數傳給babel-loader

3. 運行打包命令，js文件會被自動編譯成兼容低版本瀏覽器的代碼

一個可正確運行的webpack.config.js文件代碼如下（添加了polyfill）：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const config = {
  mode: 'development',
  entry: ["@babel/polyfill", './src/index.js'],
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'pushbox.bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [{
      test: /(\.png)|(\.jpg)|(\.gif)$/,
      use: ['file-loader']
    },
    {
      test: /\.m?js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './index.html',title:'推箱子小遊戲'}),
    new CopyWebpackPlugin([{
      from: './src/assets',
      to:'./assets'
    }])
  ],
  optimization: {
    minimize: true
  }
}

module.exports = config;

通過babel配置文件進行配置

通過babel配置文件，也能夠向babel傳遞參數，我們在項目根目錄下面新建babel.config.js：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          ie: "9"
        }
      }
    ]
  ]
}

presets的詳細配置項看這裏：https://www.babeljs.cn/docs/babel-preset-env