webpack的初步学习笔记(2)与loader联动

日期：2018-09-16T00:00:00Z

1. 前置知识

loader有三种使用方法

config: 在webpack.config.js中编辑（推荐，下面都是用的此方法）
inline: 在每个import中提及他们
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