如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?

例如:

使用这个

import webpack from 'webpack';

而不是

var webpack = require('webpack');

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


当前回答

将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的更多信息,请查看官方文档。

其他回答

将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的更多信息,请查看官方文档。

对于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文件。

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

在webpack.config.js中添加 模块:{ 规则:[ { 测试:/ \ . js /美元, 装载机:“babel-loader” } ] } 创建一个。babel。Rc,然后加进去

{ "presets": ["@babel/env", "@babel/react"], “插件”:( [ “@babel / plugin-proposal-class-properties”, ] ] }

在包中。json添加

NPM install @babel/core NPM install @babel/preset-env——save-dev NPM install @babel/preset-react——save-dev NPM install @babel/plugin-proposal-class-properties NPM安装babel-loader——save-dev

另一种方法是这样写一个npm脚本:"webpack": "babel-node ./node_modules/webpack/bin/webpack",然后像这样运行:

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

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

例子:

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