manlili blog

webpack之loaders例子(babel-loader)

发表于 | 分类于

这里讲解下loaders的例子
源码地址https://github.com/manlili/webpack_learn里面的lesson08,主要讲babel将ES6语法转化为ES5语法。

第一步

在空白的文件夹正确的安装webpack，这一步webpack入门指南已经讲过了。
然后创建源文件夹src,在src下面创建app.js，然后创建个目标文件夹dist,用来盛放打包生成的文件.

第二步

在根目录下面创建index.html,内容是:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title><%= htmlWebpackPlugin.options.title %></title>
	</head>
	<body>
	</body>
</html>

为了测试，我们将app.js用ES6的语言来写，内容是:

1
2
3
const App = () => {
	console.log("测试");
}

第三步

配置webpack的打包配置文件webpack.config.js,内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//用babel-loader将js文件转义为浏览器可识别的js
var path = require("path"); //webpack升级到2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: {
		app: './src/app.js',
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'js/[name].bundle.js'    //区分文件有[name], [hash], [chunkhash]
	},
	module: {
		rules: [
		    {
		      test: /\.js$/,   //用正则匹配找到所有的js文件
		      exclude: /node_modules/,  //排除node_modules文件下js
		      use: {
		        loader: 'babel-loader',  //使用babel-loader处理找到js文件
		        options: {      //采用babel-loader的"es2015"规则将找的js为浏览器可识别的js
		          presets: ["es2015"],
		          plugins: ["transform-remove-strict-mode"]
		        }
		      }
		    }
		]
	},
	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html', //生成的文件名字
			template: 'index.html',  //生成文件的 模板
			inject: 'body',    //打包生成的js,css和其他东西插入的位置
			title: 'i am girl'
		})
	]
}

上面的module配置意思是配置loaders，然后定义loaders使用的规则rules，请注意使用loaders之前必须先安装对应的loaders,比如上面用到了babel-loader，需要我们去babel官网找到webpack的安装方式:

1
npm install --save-dev babel-loader babel-core

babel的官网将webpack的使用方法都写的很详细:

1
2
3
4
5
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

当然关于使用babel-loader转义的options,我们可以使用的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module: {
	rules: [
	    {
	      test: /\.js$/,   //用正则匹配找到所有的js文件
	      exclude: /node_modules/,  //排除node_modules文件下js
	      use: {
	        loader: 'babel-loader',  //使用babel-loader处理找到js文件
	        options: {      //采用babel-loader的"es2015"规则将找的js为浏览器可识别的js
	          presets: ["es2015"],
	          plugins: ["transform-remove-strict-mode"]
	        }
	      }
	    }
	]
}

这里还有个坑，我们使用的babel-loader转义的options，比如es2015， transform-remove-strict-mode都需要先安装再使用，可以在npm官网上查找安装方法，这里我直接贴出它们的安装语法如下:

1
2
npm install --save-dev babel-cli babel-preset-es2015
npm install --save-dev babel-plugin-transform-remove-strict-mode

接下来来看下我们的文件夹组成
图

第四步

在根目录下打开命名行输入

1
webpack

打包后发现dist/js下面生成的app.bundle.js内容是:

1
2
3
4
5
6
7
8
9
10
/******/ ([
/* 0 */
/***/ (function(module, exports) {
var App = function App() {
	console.log("测试");
};
/***/ })
/******/ ]);

上面我们可以看出生成的app.bundle.js中没有”use strict”,说明plugins: [“transform-remove-strict-mode”]起了效果。

第五步

将上面的用loaders打包换一种方法实现如下,就是将babel的参数移到package.json里面,下面来看package.json关于babel的内容配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "name": "webpack_learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "babel": {
		"presets": ["es2015"],
		"plugins": ["transform-remove-strict-mode"]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/manlili/webpack_learn.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/manlili/webpack_learn/issues"
  },
  "homepage": "https://github.com/manlili/webpack_learn#readme",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-remove-strict-mode": "0.0.2",
    "babel-preset-es2015": "^6.24.1",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "babel-plugin-config-export": "^1.0.0"
  }
}

在根目录下打开命名行输入

1
webpack

打包后发现dist/js下面生成的app.bundle.js内容是:

1
2
3
4
5
6
7
8
9
10
/******/ ([
/* 0 */
/***/ (function(module, exports) {
var App = function App() {
	console.log("测试");
};
/***/ })
/******/ ]);

上面我们可以看出生成的app.bundle.js中没有”use strict”,而且app.bundle.js内容和上面的直接配置plugins: [“transform-remove-strict-mode”]一模一样，说明起了效果。

第六步

将上面的用loaders打包换第三种方法实现如下，其实也可以像babel官网介绍的那样创建一个.babelrc结尾的文件写上

1
2
3
4
5
6
7
8
{
  "presets": [
    'es2015'
  ],
  "plugins": [
    "transform-remove-strict-mode"
  ]
}

接着修改webpack的打包配置文件webpack.config.js,内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//用.babelrc结尾的文件配置后打包
var path = require("path"); //webpack升级到2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: {
		app: './src/app.js',
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'js/[name].bundle.js'    //区分文件有[name], [hash], [chunkhash]
	},
	module: {
		rules: [
		    {
		      test: /\.js$/,   //用正则匹配找到所有的js文件
		      exclude: /node_modules/,  //排除node_modules文件下js
		      use: {
		        loader: 'babel-loader'
		      }
		    }
		]
	},
	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html', //生成的文件名字
			template: 'index.html',  //生成文件的 模板
			inject: 'body',    //打包生成的js,css和其他东西插入的位置
			title: 'i am girl'
		})
	]
}

在根目录下打开命名行输入

1
webpack

打包后发现dist/js下面生成的app.bundle.js内容是:

1
2
3
4
5
6
7
8
9
10
/******/ ([
/* 0 */
/***/ (function(module, exports) {
var App = function App() {
	console.log("测试");
};
/***/ })
/******/ ]);

上面我们可以看出生成的app.bundle.js中也没有”use strict”,而且app.bundle.js内容和上面的直接配置plugins: [“transform-remove-strict-mode”]结果一模一样，说明这种方法挺好,官网上比较推荐这种用法。

第七步

上面打包都说过了，但是我们也发现了运行完打包命令后，很长时间才能看到打包的结果，这是因为我们没有给babel-loaders指定待打包的文件路径，导致它需要在整个目录下一个一个寻找，下面我们来优化下打包的时间,修改webpack的打包配置文件webpack.config.js,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var path = require("path"); //webpack升级到2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: {
		app: './src/app.js',
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'js/[name].bundle.js'    //区分文件有[name], [hash], [chunkhash]
	},
	module: {
		rules: [
		    {
		      test: /\.js$/,   //用正则匹配找到所有的js文件
		      include: path.resolve(__dirname, 'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
		      exclude: path.resolve(__dirname, 'node_modules'),  //排除node_modules文件下js，注意需是绝对路径
		      use: {
		        loader: 'babel-loader'
		      }
		    }
		]
	},
	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html', //生成的文件名字
			template: 'index.html',  //生成文件的 模板
			inject: 'body',    //打包生成的js,css和其他东西插入的位置
			title: 'i am girl'
		})
	]
}

在根目录下打开命名行输入

1
webpack

发现命令行打包的命令里面时间比以前稍微少一点，主要是我们的测试打包的文件太少，等到打包一个大项目的时候就会发现节约很多时间。

请我喝杯果汁吧！