我在上一篇文章：【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
