如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?
例如:
使用这个
import webpack from 'webpack';
而不是
var webpack = require('webpack');
与其说这是一种需求,不如说是一种好奇心。
如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?
例如:
使用这个
import webpack from 'webpack';
而不是
var webpack = require('webpack');
与其说这是一种需求,不如说是一种好奇心。
当前回答
Babel 7和Webpack 4的配置
package.json
...
"scripts": {
"start": "webpack-dev-server --env.dev",
"build": "webpack --env.prod",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.0",
...
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-config-utils": "^2.3.1",
"webpack-dev-server": "^3.1.8"
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
webpack.config.babel.js
import webpack from 'webpack';
import { resolve } from 'path';
import { getIfUtils, removeEmpty } from 'webpack-config-utils';
export default env => {
const { ifProd, ifNotProd } = getIfUtils(env);
return {
mode: ifProd('production', 'development'),
devtool: ifNotProd('cheap-module-source-map'),
output: {
path: resolve(__dirname, ifProd('prod', 'dev')),
filename: 'bundle.js'
},
其他回答
将webpack.config.js重命名为webpack.config.babel.js。
然后在.babelrc: {"presets": ["es2015"]}
然而,如果你想为babel-cli使用不同的babel配置,你的.babelrc可能看起来像这样:
{
"env": {
"babel-cli": {
"presets": [["es2015", {"modules": false}]]
},
"production": {
"presets": ["es2015"]
},
"development": {
"presets": ["es2015"]
}
}
}
在package.json中:
{
"scripts": {
"babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
"build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
...
},
...
}
这是愚蠢的,但{"modules": false}将破坏webpack如果你不使用不同的环境。
有关.babelrc的更多信息,请查看官方文档。
这真的很简单,但从任何答案中我都看不出来,所以如果有人和我一样困惑:
只需将.babel附加到你的文件名扩展名之前的部分(假设你已经安装了babel寄存器作为依赖项)。
例子:
mv webpack.config.js webpack.config.babel.js
2022年的读者:
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
在package.json中添加"type": "module" 将webpack.config.js的语法改为ESM。 享受。
这就是我使用webpack 4时的效果:
在package.json:
"scripts": {
"dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},
"devDependencies": {
"@babel/core": "^7.0.0-rc.1",
"@babel/register": "^7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},
"babel": {
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"transform-es2015-modules-commonjs"
]
}
您可以清楚地看到每个依赖项是如何使用的,所以没有什么奇怪的。
注意我使用的是webpack-serve——require,但如果你想使用webpack命令,请将其替换为webpack——config-register。在任何一种情况下,都需要@babel/register来实现此工作。
就是这样!
纱线开发
你可以在配置中使用es6 !
对于webpack-dev-server,使用与webpack命令相同的——config-register选项
注意:
不需要将配置文件重命名为webpack.config.babel.js(由已接受的答案所建议)。Webpack.config.js可以正常工作。
对于TypeScript:直接从https://webpack.js.org/configuration/configuration-languages/
npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server
然后继续写你的,例如: webpack.config.ts
import path from 'path';
import webpack from 'webpack';
const config: webpack.Configuration = {
mode: 'production',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
export default config;
如果你的目标不是commonjs(这是一个要求,因为它依赖于ts-node),你可以使用一个插件来为webpack配置一个单独的tsconfig文件。