webpack 和 babel的結合
阿新 • • 發佈：2018-12-17
之前一直因為babel-loader版本不對一直報錯，Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property 'bindings' of null，看了各種部落格，還是報錯，乾脆就直接到babel-loader的github上按官方的來，反而解決了。再按照官方的安裝完後，
webpack 4.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack
配置一下package.json
"scripts": {
"dev": "webpack --mode development ./app.js --output ./dev/main.js",
"build": "webpack --mode production ./app.js --output ./prod/main.js"
},
然後配置一下webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
然後npm run build就可以發現，寫的es6語法被轉為了es5,並且已經壓縮了