关于babel和webpack结合使用的实践
1.webapack和babel的高版本文件配置
1.项目根目录下package.json文件内容如下：
{
"name": "dive-into-webpack",
"version": "1.0.0",
"scripts": {
"build": "webpack --w"
},
"dependencies": {
"@babel/polyfill": "7.8.7",
"@babel/runtime": "7.8.7",
"core-js": "3.6.4"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/cli": "7.8.4",
"@babel/core": "7.8.7",
"@babel/preset-env": "7.8.7",
"@babel/runtime": "7.8.7",
"@babel/types": "7.8.7",
"babel-loader": "8.0.6",
"webpack": "4.39.0",
"webpack-bundle-analyzer": "3.6.0",
"webpack-cli": "3.3.6"
}
}
2.项目根目录下.babelrc文件内容如下：
{
"plugins": [
],
"presets": [
[
// "env"
"@babel/preset-env",
{
"targets": {
"browsers": [
"chrome >= 70",
"edge >= 15",
"firefox >= 60",
"ie >= 11"
]
},
"useBuiltIns": "usage",
"corejs": 3,
"comments": true,
"sourceMap": "inline"
}
],
],
}
3.项目根目录下webpack.config.js文件 内容如下：
const path = require('path');
module.exports = {
// JS 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
test: /\.js$/,
// use: ['babel-loader'],
use: {
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: [
[
'@babel/preset-env'
]
],
},
},
},
]
},
devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};
4.项目根目录下index.html文件 内容如下
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 webpack 输出的 JS 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
5.项目根目录下main.js文件内容如下：
//引入babel polyfill
import "@babel/polyfill"
// 通过 ES6 模块化规范导入 show 函数
import { show } from './show';
// 执行 show 函数
show('Webpack');
const funA=x=>x+1;
const Gen = (time) => {
return new Promise((resolve, reject) => {
setTimeout(function () {
if (time < 500) {
reject(time);
} else {
resolve(time);
}
}, time);
});
};
Gen(Math.random() * 1000)
.then((val) => console.log("resolve", val))
.catch((err) => console.log("err"))
.finally(() => console.log("finish"));
console.log([1,2,3].includes(1));
6.项目根目录下show.js文件内容如下：
// 操作 DOM 元素，把 content 显示到网页上
export function show(content) {
window.document.getElementById('app').innerText = `Hello,${content}`;
}
2.webapack和babel的低版本配置
低版本的配置，可以更明显的看到babel转换后的代码，以及webpack压缩之后的文件。方便新手理解
1.package.json文件内容如下：
{
"name": "dive-into-webpack",
"version": "1.0.0",
"scripts": {
"build": "webpack --w"
},
"dependencies": {
"@babel/polyfill": "7.8.7",
"@babel/runtime": "7.8.7",
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"webpack": "^3.4.0"
}
}
2.项目根目录下.babelrc文件内容如下：
{
"presets": [
"env"
]
}
3.项目根目录下webpack.config.js文件 内容如下：
const path = require('path');
module.exports = {
// JS 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
},
]
},
devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};
