1. 前置知识

loader有三种使用方法

  1. config: 在webpack.config.js中编辑(推荐,下面都是用的此方法)
  2. inline: 在每个import中提及他们
  3. cli: 用shell来执行

在module.rules中可以具体写每一个loader,不过他们的执行顺序是从右到左,也就是写在最后面的最优先执行。

2. 与babel7的联动

安装[3]

npm install -D babel-loader @babel/core @babel/preset-env webpack

3. 在webpack中的设定例

webpack.config.js中的设定例子。
(文档真的写的太详细辣)

module.exports = {
  //entry
  //output
  module: {
    rules: [{
      test: /\.js$/,//这里是正规表现
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }]
  }
}

4. webpack会利用babel.config.js的设定嘛?

根据我的测试,会的。所以事实上如果写了babel.config.js,应该就不用写options了。

5. 今后的课题

把我导入的几个库,比如用bootstarp的时候就必然会用到的jquery和tether,看看能不能整合到一起,都用webpack来输出。
不过这也造成一个问题,如果出bug的话比较麻烦,笑。

[1]webpack v4.19.0 concepts Loaders
[2]webpack v4.19.0 loaders
[3]webpack v4.19.0 babel-loader
[4]Babel v7.0.0 @babel/polyfill
[5]Babel v7.0.0 @babel/preset-env


Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)