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

Posted 2021-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在webpack.config.js中使用ES6？相关的知识，希望对你有一定的参考价值。

如何在webpack.config中使用ES6？像这样的回购https://github.com/kriasoft/react-starter-kit呢？

例如：

用这个

import webpack from 'webpack';

代替

var webpack = require('webpack');

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

答案

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

Webpack在内部依赖interpret来完成这项工作。

另一答案

我最好的方法和npm脚本是

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

并根据您对Babel的要求配置其余脚本

另一答案

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

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

"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"

另一答案

经过大量文件......

只需安装es2015预设（不是env !!!）并将其添加到 .babelrc: { "presets": [ ["es2015", { "modules": false }] ] }
将你的webpack.config.js重命名为webpack.config.babel.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节点，这是一个需要工作的req），您可以使用插件为webpack配置创建单独的tsconfig文件。

另一答案

使用Webpack 4和Babel 7

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

安装dev依赖项：

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 Configuration Language Using Babel

另一答案

作为@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

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

"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.js中使用ES6？的主要内容，如果未能解决你的问题，请参考以下文章

 
 如何在 webpack 中使用 Terser
 webpack.config.js====配置babel
 Webpack中无法加载babel ES6解析
 webpack.config.js
 webpack实现es6转es5
 如何在 VueCLI 3 中全局获取 `webpack.config.js` 或 `vue.config.js` 文件数据

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

使用Webpack 4和Babel 7

See also: