使用 webpack 打包、编译 JavaScript

作者：Seiya

时间：2019年07月08日

打包 JavaScript

检验 webpack 规范支持

创建 vendor 文件夹，其中 minus.js、multi.js 和 sum.js 分别用 CommonJS、AMD 和 ES6 规范编写。代码如下：

/* minus.js */
module.exports = function(a, b) {
	return a - b;
};

/* multi.js */
define(function(require, factory) {
	'use strict';
	return function(a, b) {
		return a * b;
	};
});

/* sum.js */
export default function(a, b) {
	return a + b;
}

在入口文件 app.js 中，我们分别用 3 种规范，引用 vendor 文件夹中的 js 文件：

/* ES6 */
import sum from './vendor/sum';
console.log('sum(1, 2) = ', sum(1, 2));

/* CommonJs */
var minus = require('./vendor/minus');
console.log('minus(1, 2) = ', minus(1, 2));

/* AMD */
require(['./vendor/multi'], function(multi) {
	console.log('multi(1, 2) = ', multi(1, 2));
});

编写 webpack 配置文件

webpack.config.js 是 webpack 默认的配置文件名，具体配置如下：

const path = require('path');

module.exports = {
	entry: {
		app: './app.js'
	},
	output: {
		filename: 'bundle.js',
		publicPath: __dirname + '/dist/', // js 引用路径或者 CDN 地址
		path: path.resolve(__dirname, 'dist') // 打包文件的输出目录
	}
};

更多 output.publicPath 属性的介绍请查看 output.publicPath

打包编译

使用 webpack 命令打包编译项目文件，编译完成后的文件存放在 dist 目录下。我们创建一个 html 文件，引用打包好的 js 文件，就可以在控制台查看最终结果。

编译 ES6

了解 babel

随着 javascript 语言的不断发展，并且速度越来越快，浏览器的发展速度已经跟不上了，而且由于浏览器的多样性，导致可能几年之内都不能普及。为了使用 JavaScript 语言的这些新特性，我们就必须依赖编译器帮助我们将新的语法翻译成浏览器可以识别的语法。babel 就是一个广泛使用的转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。

babel-loader: 负责 es6 语法转化
babel-preset-env: 包含 es6、7 等版本的语法转化规则
babel-polyfill: es6 内置方法和函数转化垫片
babel-plugin-transform-runtime: 避免 polyfill 污染全局变量

需要注意的是, babel-loader 和 babel-polyfill。前者负责语法转化，比如：箭头函数；后者负责内置方法和函数，比如：new Set()。

webpack 中使用 babel

babel 的相关配置，推荐单独写在 .babelrc 文件中。下面，如下所示：

{
  	"presets": [
    	[
			"env",
			{
				"targets": {
					"browsers": ["last 2 versions"]
				}
			}
    	]
	],
  	"plugins": ["transform-runtime"]
}

在 webpack 配置文件中，关于 babel 的调用需要写在 module 模块中。对于相关的匹配规则，除了匹配 js 结尾的文件，还应该去除 node_module/文件夹下的第三库的文件:

module.exports = {
	entry: {
		app: './app.js'
	},
	output: {
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				use: {
					loader: 'babel-loader'
				}
			}
		]
	}
};

使用 babel-polyfill

这里我们在 app.js 文件中进行引入，而没有在 webpack 配置文件中进行配置:

import "babel-polyfill";
let func = () => {};
const NUM = 45;
let arr = [1, 2, 4];
let arrB = arr.map(item => item * 2);

console.log(arrB.includes(8));
console.log("new Set(arrB) is ", new Set(arrB));

# 使用 webpack 打包、编译 JavaScript

# 打包 JavaScript

# 检验 webpack 规范支持

# 编写 webpack 配置文件

# 打包编译

# 编译 ES6

# 了解 babel

# webpack 中使用 babel

# 使用 babel-polyfill