目前webpack为4,他对一些包进行了废弃,而且对一些包要求有版本的配合,这里在安装老版本的包时会有提醒,以下是我的babel和react的配置,包括版本和变量。注意babel (包括es6转es5 和react babel的)的版本号,还有presets的变量名(不再使用es2015而是evn,也不是react,而是@babel/preset-react)
weabpack 设置了 watch : true,则不需要手动进行webpack,刷新页面是自动进行打包
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"babel-preset-env": "^7.0.0-beta.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.0.0-beta.0"
}
}
这里是webpack.config.js
module.exports = {
mode: 'development',
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'all.js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','@babel/preset-react']
}
}
}
]
},
watch : true
};