使用webpack4编译es6语法的JS文件,需要使用babel,原理不多说了,直接去度娘。
以下直接贴出代码,记录下采坑过程,以便以后不多走歪路
1、package.json配置
采坑点:babel-loader一定不要用8.0以上的版本,因为8.0版本都不兼容babel-core
{
"name": "webpack_test",
"version": "1.0.0",
"main": "a.js",
"scripts": {
"build": "webpack --progress --watch",
"server": "webpack-dev-server --content-base ./"
},
"author": "",
"license": "ISC",
"keywords": [],
"description": "",
"dependencies": {
"lodash": "^4.17.11",
"moment": "^2.22.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
2、webpack.config.js配置
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: {
'a': [path.resolve(__dirname, 'assets/source/js/a.js')]
},
output: {
path: path.resolve(__dirname, 'assets/dist/js'),
filename: '[name]-buddle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: { presets: ['es2015'] }
}
]
}
]
},
plugins:[
]
}
3、cnpm run build -----执行webpack打包,将es6打包成es5
4、cnpm run server -----启动服务