随着ES6和TS的的盛行,webpack和babel在项目开发中的作用也日渐显现。所以作为前端开发者,很有必要掌握这些开发工具。
在《webpack入门使用教程》中我们学习了如何配置webpack。
在《ES6开发环境搭建之babel》中我们学习了如何配置babel。
现在我们需要把两者结合起来使用。
1 安装babel
上一篇在配置babel的文章中我已经安装l了babel-cli/babel-preset-env/babel-oreset-latest,在这个基础上需要再安装 babel-core 和 babel-loader 。
npm install babel-core [email protected] --save-dev
- "babel-cli": "^6.26.0",
- "babel-core": "^6.26.3",
- "babel-loader": "^7.1.5",
- "babel-preset-env": "^1.7.0",
- "babel-preset-latest": "^6.24.1",
这里core的版本是6.x 要求loader的版本为7.x。目前core的最新版本是6.x,而最新的loader已经更新到了8.x,所以在安装loader的时候要指定一下版本号。否则会报错的哦。
//这段是官方文档中的,应该是对版本之间的一些要求吧。
webpack 4.x | babel-loader 8.x | babel 7.x
npm install babel-loader @babel/core @babel/preset-env webpack
webpack 4.x | babel-loader 7.x | babel 6.x
npm install babel-loader@7 babel-core babel-preset-env webpack
2 添加配置文件
除了在《ES6开发环境搭建之babel》文章中的.babelrec配置之外,我们还需要在webpack.config.js中添加以下代码。这段代码是告诉webpack在打包的时候遇到js文件(忽略node_modules文件夹)则进行转换。
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}]
}
到此所以的配置都已经完成。这时候我们在运行 npm run dev 命令,发现dist目录下的新生成的js文件已经经过了babel转换。然后我们就可以愉快的使用ES6语法开发项目了。
3 总结
先贴出三个重要的配置文件全部代码:
//package.json
{
"name": "es6webpackbable",
"version": "1.0.0",
"description": "es6toes5",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d release",
"dev": "webpack --config ./webpack.config.js --mode development",
"start": "webpack-dev-server --config ./webpack.config.js --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-latest": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7"
}
}
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
open: true,
port: 9000
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
//title: 'Output Management',
template: './index.html'
})
],
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}]
}
}
// .babelre
{
"presets":["env","latest"],
"plugins":[]
}
关于webpack 和 babel的知识还有很多,这里仅仅只个入门。其他的知识点在官方文档中都有涉及,需要在日后的实战中慢慢提高和掌握了。
项目GitHub地址:https://github.com/scqilin/webpackbabel,有兴趣的同学可以下载看看。