Posted at

Babel7でwebpack.config.babel.jsを使う


Babel7でwebpack.config.babel.jsを動かす

普通にやろうとすると、SyntaxError: Unexpected token importで怒られる。

@babel/registerを入れると解決します。

参考:https://github.com/webpack/webpack/issues/5960

私の設定を載せます。

concurrentlyとeslintは必須ではないです。


package.json

{

"name": "hello babel7",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"webpack": "webpack -w",
"lint": "eslint src/*.*",
"build": "webpack",
"start": "concurrently \"npm run webpack\" \"npm run lint\""
},
"keywords": [],
"author": "KAJIKEN <kajiken@kajiken.jp>",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"concurrently": "^4.0.1",
"eslint": "^5.6.1"
},
"dependencies": {}
}


.babelrc

{

"presets": [
"@babel/preset-env"
]
}


webpack.config.babel.js

import glob from 'glob';

export default {
mode: 'development',
//mode: 'production',
entry: glob.sync('./src/*.js'),
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
]
}
}
]
}
]
}
};


eslintの設定はお好みで。


.eslintrc.json

{

"rules": {
"quotes": [
"off",
"double"
],
"linebreak-style": [
"off",
"windows"
],
"semi": [
"error",
"always"
],
"no-console": "off"
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"parserOptions": {
"sourceType": "module"
},
"plugins": []
}