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

Question

如何在webpack.config中使用ES6？像这个回复 https://github.com/kriasoft/react-starter-kit 吗？

例如:

用这个

import webpack from 'webpack';

代替

var webpack = require('webpack');

这是一种好奇而不是需要.

Answer 1

尝试将您的配置命名为webpack.config.babel.js.您应该在项目中包含babel-register.react-router-bootstrap上的示例.

Webpack依赖内部解释来完成这项工作.

Answer 2

作为@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执行它:

$ babel-node tools/bundle

PS:当您需要实现更复杂的构建步骤时,通过JavaScript API调用webpack可能是一种更好的方法(而不是通过命令行调用它).例如,在服务器端捆绑包准备就绪后,启动Node.js应用服务器,并在Node.js服务器启动后立即启动BrowserSync开发服务器.

也可以看看:

• 反应入门套件(package.json/scripts,tools/bundle.js,tools/webpack.config.js)
• 反应静态样板(run.js,webpack.config.js,node run)
• 你可能不需要Gulp.js

Answer 3

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

Answer 4

致 2022 年的读者：

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

1. 加入"type": "module"​package.json

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

3. 享受。

Answer 5

我在使用Webpack 2运行@Juho的解决方案时遇到了问题.Webpack迁移文档建议你转向babel模块解析:

重要的是要注意,您将要告诉Babel不解析这些模块符号,以便webpack可以使用它们.您可以通过在.babelrc或babel-loader选项中设置以下内容来完成此操作.

.babelrc:

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

遗憾的是,这与自动babel注册功能相冲突.删除

{ "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 }],
        ],
    },
},

Answer 6

这真的很容易,但是对于我来说,任何答案都不是很明显,所以如果有其他人像我这样困惑:

只需.babel在扩展名之前附加文件名的一部分(假设您已babel-register作为依赖项安装).

例:

mv webpack.config.js webpack.config.babel.js

Answer 7

这对我使用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(如接受的答案所示).--config-register会工作得很好.

Answer 8

Babel 7和Webpack 4 的配置

包.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'
        },

Answer 9

对于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 为目标，则可以使用插件为 webpack 配置创建单独的 tsconfig 文件（这是使其工作的必要条件，因为它依赖于 ts-node）。

Answer 10

另一种方法是对节点使用require参数:

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

在电子反应样板中找到这种方式,看看build-main和build-renderer脚本.