如何在webpack.config.js中使用ES6 ?

如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit < a href = " https://github.com/kriasoft/react-starter-kit " > < / > < / p >吗?

例如:

使用这个

import webpack from 'webpack';

而不是

var webpack = require('webpack');

与其说这是一种需求，不如说是一种好奇心。

116800 次浏览
小开
最佳答案

试着将你的配置命名为webpack.config.babel.js。你应该在项目中包含babel-register。实例位于react-router-bootstrap。

Webpack内部依赖解释来实现此工作。

小开

作为@bebraw建议的替代方案，您可以使用ES6+语法创建一个JavaScript自动化脚本:

// tools/bundle.js


import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+


const bundler = webpack(webpackConfig);


bundler.run(...);

用巴别塔来执行:

$ babel-node tools/bundle

注::当你需要实现更复杂的构建步骤时，通过JavaScript API调用webpack可能是一个更好的方法(比通过命令行调用它)。例如，在服务器端bundle准备好后，启动Node.js应用服务器，在Node.js服务器启动后，启动BrowserSync开发服务器。

参见:

小开

另一种方法是有一个这样的npm脚本:"webpack": "babel-node ./node_modules/webpack/bin/webpack"，并像这样运行它:npm run webpack。

小开

还有一种方法是为node使用require参数:

node -r babel-register ./node_modules/webpack/bin/webpack

在electron-react-boilerplate中可以找到这种方法，看看build-main和build-renderer脚本。

小开

这真的很简单，但从任何答案中我都看不出来，所以如果有人和我一样困惑:

只要将.babel附加到你的文件名扩展名之前的部分(假设你已经安装了babel-register作为依赖项)。

例子:

mv webpack.config.js webpack.config.babel.js
小开

我最好的方法与npm脚本是

node -r babel-register ./node_modules/webpack/bin/webpack

并根据您对巴别塔的需求配置其余的脚本

小开

我在Webpack 2上运行@Juho的解决方案时遇到了一个问题。Webpack迁移文档建议你打开babel模块解析:

重要的是要注意，您将希望告诉Babel不要解析 这些模块符号，以便webpack可以使用它们。你可以通过 在.babelrc或babel加载器选项中设置以下内容

.babelrc:

{
"presets": [
["es2015", { "modules": false }]
]
}

遗憾的是，这与自动巴别寄存器功能相冲突。删除

{ "modules": false }

巴别塔的配置让一切重新运转起来。然而，这将导致破坏摇树，所以一个完整的解决方案将涉及重写加载器选项中的预设:

module: {
rules: [
{
test: /\.js$/,
include: path.resolve('src'),
loader: 'babel-loader',
options: {
babelrc: false,
presets: [['env', {modules: false}]]
}
}
]
}

编辑, 2017年11月13日;更新webpack配置片段到webpack 3(感谢@x-yuri)。旧的Webpack 2代码片段:

{
test: /\.js$/,
exclude: ['node_modules'],
loader: 'babel',
query: {
babelrc: false,
presets: [
['es2015', { modules: false }],
],
},
},
小开

将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的更多信息，请检查官方文档. c。

小开

没有足够的代表来评论，但我想为任何TypeScript用户添加一个类似于上面@Sandrik的解决方案

我有两个脚本，我使用指向webpack配置(JS文件)，包含ES6语法。

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

而且

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

小开

这就是我使用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来完成此工作。

就是这样!

yarn dev

并且你可以在配置中使用es6 !

对于webpack-dev-server，使用与webpack命令相同的--config-register选项

注意:

不需要将配置文件重命名为webpack.config.babel.js(正如接受的答案所建议的那样)。webpack.config.js将工作得很好。

小开

看了无数的文件之后……

  1. 只需安装es2015预设(不是env !!)并将其添加到

    .babelrc:
{
"presets": [
["es2015", { "modules": false }]
]
}

  2. Rename your webpack.config.js to webpack.config.babel.js

小开

巴别塔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'
},
小开

对于打印稿:直接来自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文件。

小开

使用Webpack 4和Babel 7

要设置webpack配置文件以使用ES2015需要Babel:

安装开发依赖项:

npm i -D  webpack \
webpack-cli \
webpack-dev-server \
@babel/core \
@babel/register \
@babel/preset-env
npm i -D  html-webpack-plugin

创建一个.babelrc文件:

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

创建webpack配置webpack.config.babel.js:

import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';


const config = {
mode: 'development',
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
})
],
resolve: {
modules: [_resolve(__dirname, './src'), 'node_modules']
}
};


export default config;

在package.json中创建脚本:

  "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},

运行npm run build和npm start。

webpack配置基于以下目录结构的示例项目:

├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── Greeter.js
│   ├── index.html
│   └── index.js
└── webpack.config.babel.js

示例项目:Webpack配置语言使用Babel

小开

将es6添加到webpack需要3个步骤

  1. 在webpack.config.js中添加

    module:{


rules:[
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
    1. 创建.babel.rc并在其内部进行添加
      2. 李< / ol > < / > 
    {
"presets": ["@babel/env", "@babel/react"],
"plugins": [
[
"@babel/plugin-proposal-class-properties",
]
]
}
    1. 在package.json中添加
    npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
npm install babel-loader --save-dev
小开

编辑:截至2021年2月

https://github.com/webpack/webpack-cli/pull/2381

你不能。你必须将它转换为CommonJS，使用babel或esm。

https://github.com/webpack/webpack-cli/issues/282

但是你可以运行webpack -r esm @babel/register

小开

2022年的读者:

"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"

  1. 在package.json中添加"type": "module"

  2. 将webpack.config.js的语法更改为ESM。

  3. < p >享受。


提交答案