webpack4.0 入门实践教程(6)

url-loader 和 file-loader 是什么关系呢？

简单地说， url-loader 封装了 file-loader 。 url-loader 不依赖于 file-loader ，即使用 url-loader 时，只需要安装 url-loader 即可，不需要安装 file-loader ，因为 url-loader 内置了 file-loader 。

通过上面的介绍，我们可以看到，url-loader 工作分两种情况：

• 文件大小小于 limit 参数，url-loader 将会把文件转为 DataURL；
• 文件大小大于 limit，url-loader 会调用 file-loader 进行处理，参数也会直接传给 file-loader。因此我们只需要安装 url-loader 即可。

有关 url-loader 和 file-loader 的解析：webpack 之图片引入-增强的 file-loader：url-loader

配置 babel

babel-loader

Babel 是一个让我们能够使用 ES 新特性的 JS 编译工具，我们可以在 webpack 中配置 Babel，以便使用 ES6、ES7 标准来编写 JS 代码。

Babel 7 的相关依赖包需要加上 @babel scope。一个主要变化是 presets 设置由原来的 env 换成了 @babel/preset-env , 可以配置 targets , useBuiltIns 等选项用于编译出兼容目标环境的代码。其中 useBuiltIns 如果设为 "usage" ，Babel 会根据实际代码中使用的 ES6/ES7 代码，以及与你指定的 targets，按需引入对应的 polyfill ，而无需在代码中直接引入 import '@babel/polyfill' ，避免输出的包过大，同时又可以放心使用各种新语法特性。

npm i babel-loader @babel/core @babel/preset-env -D

笔者这里配的版本号如下

{
 "babel-loader": "^8.0.4",
 "@babel/core": "^7.1.2",
 "@babel/preset-env": "^7.1.0"
}

babel-loader: 用 babel 转换 ES6 代码需要使用到 babel-loader

@babel-preset-env： 默认情况下是等于 ES2015 + ES2016 + ES2017，也就是说它对这三个版本的 ES 语法进行转化。

 @babel/core：babel 核心库

根目录下新建 .babelrc 文件

{
 "presets": [
 [
 "@babel/preset-env",
 {
 "modules": false,
 "targets": {
 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 },
 "useBuiltIns": "usage"
 }
 ]
 ]
}

• presets 是一堆 plugins 的预设，起到方便的作用。
• plugins 是编码转化工具，babel 会根据你配置的插件对代码进行相应的转化。

修改 webpack.config.js

module.exports = {
 module: {
 rules: [
 //...
 {
 test: /\.m?js$/,
 exclude: /(node_modules|bower_components)/,
 use: {
 loader: 'babel-loader'
 }
 }
 ]
 }
}