如何为 ES6+ 配置 Webpack 和 Babel
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
Webpack 和 Babel 是现代 JavaScript 开发者最必备的两大工具。它们结合使用，能为我们打造强大的开发利器。本文将介绍 Webpack 4 和 Babel 7 的配置。
开始之前，请先创建一个项目文件夹并运行：
npm init
配置您的 package.json 文件
Webpack是一个用于现代 JavaScript 应用的静态模块打包工具。它本质上是将所有 JavaScript 文件打包成一个文件，使它们彼此能够相互识别。要安装 Webpack，请运行：
npm install webpack --save-dev
这会告诉 npm 安装最新版本的 webpack 作为开发依赖项，安装 webpack 后，我们创建一个webpack.config.js文件，并填充以下内容：
const path = require('path');
module.exports = {
entry: './src/js/index.js', //location of your main js file
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js' // where js files would be bundled to
}
}
接下来我们需要一种通过命令行与 webpack 通信的方法，为此我们需要使用 webpack 命令行工具，没错，我们需要用 npm 安装它，现在运行
npm install webpack-cli --save-dev
我们还需要安装 webpack-dev-Server 来在端口上运行我们的 Web 应用程序，最后我们可以安装 html-webpack-plugin。
npm install webpack-dev-server html-webpack-plugin --save-dev
现在我们将webpack.config.js文件更新为如下所示：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist' //where contents are served from
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', // name of html file to be created
template: './src/index.html' // source from which html file would be created
})
]
}
最后，将 package.json 中的 scripts 更改为
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
}
运行上面的开发脚本会打包你的 js 文件，运行上面的构建脚本会打包并压缩你的 js 文件，运行启动脚本会在端口上提供你的应用程序。
npm run dev //running dev script
npm run build //running build script
npm run start //running Start script
Babel是一个工具链，主要用于将 ECMAScript 2015 及更高版本的代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器或环境中运行。
要获取 Babel 所需的所有依赖项，请运行：
npm install @babel/core @babel/preset-env babel-loader --save-dev
也运行
npm install @babel/runtime core-js@3 --save
现在我们已经具备运行 Babel 的所有条件，我们创建一个.babelrc文件并更新其内容，使其如下所示。
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": "3",
"targets": {
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
然后将webpack.config.js文件更新为以下内容：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/, //using regex to tell babel exactly what files to transcompile
exclude: /node_modules/, // files to be ignored
use: {
loader: 'babel-loader' // specify the loader
}
}
]
}
}
完成以上步骤后，运行开发或构建脚本，然后运行启动脚本；webpack 和 babel 现在已成功配置。尽情享受模块化编程以及在应用中使用 ES6+ 语法的乐趣吧！
文章来源：https://dev.to/alecgodwin/how-to-setup-webpack-and-babel-for-es6-dpk