npm 安装包
npm i webpack webpack-cli -D
// babel-loader @8 版本的包 ， npm i babel-loader @babel/preset-env @babel/core -D
全局的垫片 为sindows 添加 es6 语法的实现
npm i babel-polyfill -D // 文件中引用 - import ‘babel-polyfill’;
局部垫片 runtime ? 未实现
npm i @babel/runtime -Snpm i @babel/plugin-transform-runtime -D
package.json 设置
{
"name": "js-1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"prod":"webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.4",
"webpack": "^4.23.0",
"webpack-cli": "^3.1.2"
}
}
webpack.config.js
/**
* @file webpack -js babel-loader
*/
const path = require('path');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 打包输出目录
output: {
path: path.resolve(__dirname, './build'),
filename: '[name]-dev.js',
chunkFilename: '[name]-chunk.js'
},
// 模块
module: {
rules: [
// js babel-loader
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
// 查找目录
include: '/src',
// 排除项
exclude: '/node_modules/'
}
]
}
};
.babelrc (babel配置文件)
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
]
}
runtime
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
],
"plugins": [
"@babel/transform-runtime"
]
}
