我在上一篇文章：【Webpack4 创建项目以及打包一个JS文件】 已经搭建过环境以及创建过项目了。
1、创建一个文件夹 webpack，通过命令行 cd 到该文件夹
$ cd /webpack
2、进行初始化
$ npm init
3、安装 babel
$ npm install -D babel-loader @babel/core @babel/preset-env
4、然后我们新建一个 main.js 以及一个 index.html，跟上一个文章中一样用于测试
5、创建 webpack.config.js 文件，并设置 module 进行处理指定文件
var config = {
// 入口文件
entry: {
main: './main.js'
},
// 输出配置
output: {
// 输出得到的文件，文件名可以随意写
filename: 'dzm.js'
},
// 模块的加载，这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器
module: {
// 在 webpack3.x 中还保留之前版本的 loaders，与 rules 并存都可以使用，在新版中完全移除了 loaders，必须使用 rules。
// loaders: [ { xxx } ]
rules: [
{
// 文件匹配正则
test: /\.js$/,
// 符合匹配规则的文件则使用 use 中指定的框架来处理它
use: 'babel-loader',
// 设置指定文件不需要进行匹配处理
exclude: '/node_module/'
}
]
}
};
module.exports = config;
6、到这里我们还需要使用 Babel Presets，也就是我们需要处理的 js 文件还得指定按照什么规范处理，上面命令行我们已经一块安装了 @babel/preset-env，现在只需要修改 webpack.config.js 对它进行使用：
var config = {
// 入口文件
entry: {
main: './main.js'
},
// 输出配置
output: {
// 输出得到的文件，文件名可以随意写
filename: 'dzm.js'
},
// 模块的加载，这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器
module: {
// 在 webpack3.x 中还保留之前版本的 loaders，与 rules 并存都可以使用，在新版中完全移除了 loaders，必须使用 rules。
// loaders: [ { xxx } ]
rules: [
{
// 文件匹配正则
test: /\.js$/,
// 符合匹配规则的文件则使用 use 中指定的框架来处理它
// use: 'babel-loader',
// 我们现在需要使用 babel-loader 里面的 Babel Presets，这里 use 也可以换成数组 [{ loader: xxx ... }]
use: {
// 表示我们使用的是 babel-loader
loader: 'babel-loader',
// 并指定使用的参数
options: {
// 这里就可以设置指定我们刚才安装的 @babel/preset-env
// presets: ['@babel/preset-env']
// 如果我需要给 @babel/preset-env 设置参数的时候则需要这么写
presets: [
['@babel/preset-env', {
// 这个是 @babel/preset-env 里面的参数，它可以更具指定的目标进行编译跟不编译
// 它可以指定 browsers 浏览器，指定在什么版本的浏览器需要编译，什么版本的浏览器放弃编译
targets: {
// 可以指定全球占用率大于百分之多少的浏览器需要进行支持，也可以指定主浏览器的最后几个版本进行支持
// 这个浏览器的数据其实也是从 【browserslist】 【can i use】这些开源项目上来的， github 上能找到。
browsers: ['> 1%', 'last 2 versions']
// 也可以指定浏览器 chrome 版本
// chrome: '52'
}
}]
]
}
},
// 设置指定文件不需要进行匹配处理
exclude: '/node_module/'
}
]
}
};
module.exports = config;
7、到这里我们就可以进行打包测试了，我们现在需要在之前新建的 main.js 中写一些测试代码：
let func = () => {}
const num = 100
let array = [1, 2, 3, 4]
然后我们通过命令行进行打包使用即可：
$ webpack
