blocks|key|4477944|text|尝试将您的配置命名为webpack.config.babel.js。您应该将babel-register包含在项目中。react-router-bootstrap上的示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4477945|Webpack在内部依赖于interpret来实现这一点。|4477946|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/babel-register|1|https://github.com/react-bootstrap/react-router-bootstrap|2|https://www.npmjs.com/package/interpret^0|A|N|12|E|0|1N|M|1|0|D|9|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]|$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]|R|$5|K|L|M|E|$N|S]]]]

Try naming your config as <code>webpack.config.babel.js</code>. You should have <a href="https://www.npmjs.com/package/babel-register">babel-register</a> included in the project. Example at <a href="https://github.com/react-bootstrap/react-router-bootstrap">react-router-bootstrap</a>.

Webpack relies on <a href="https://www.npmjs.com/package/interpret">interpret</a> internally to make this work.

blocks|key|4477984|text|另一种方法是有一个像这样的npm脚本："webpack":+"babel-node+./node_modules/webpack/bin/webpack"，并像这样运行它：npm+run+webpack。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4477985|entityMap^0|J|1M|2E|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Another approach is to have a npm script like this: <code>"webpack": "babel-node ./node_modules/webpack/bin/webpack"</code>, and run it like so: <code>npm run webpack</code>.

blocks|key|4477139|text|另一种方法是对节点使用require参数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4477140|node+-r+babel-register+./node_modules/webpack/bin/webpack|offset|length|style|CODE|4477141|在electron-react-boilerplate中可以找到这种方式，请查看build-main和build-renderer脚本。|4477142|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/chentsulin/electron-react-boilerplate/blob/master/package.json^0|0|0|1L|0|14|A|1F|E|1|Q|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

One more way is to use require argument for node:

<code>node -r babel-register ./node_modules/webpack/bin/webpack</code>

Found this way in <a href="https://github.com/chentsulin/electron-react-boilerplate/blob/master/package.json" rel="noreferrer">electron-react-boilerplate</a>, look at <code>build-main</code> and <code>build-renderer</code> scripts.

blocks|key|4477207|text|将webpack.config.js重命名为webpack.config.babel.js。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4477208|然后在.babelrc中：{"presets":+["es2015"]}|4477209|但是，如果您想为babel-cli使用不同的babel配置，您的.babelrc可能如下所示：|4477210|{
++"env":+{
++++"babel-cli":+{
++++++"presets":+[["es2015",+{"modules":+false}]]
++++},
++++"production":+{
++++++"presets":+["es2015"]
++++},
++++"development":+{
++++++"presets":+["es2015"]
++++}
++}
}|code-block|syntax|javascript|4477211|在package.json中：|4477212|{
++"scripts":+{
++++"babel":+"BABEL_ENV='babel-cli'+babel+src+-d+dist/babel+--source-maps",
++++"build-dev":+"NODE_ENV='development'+webpack+-d+--progress+--profile+--colors",
++++...
++},
++...
}|4477213|这很愚蠢，但是如果你不使用不同的环境，{"modules":+false}将会攻破webpack。|4477214|有关.babelrc的更多信息，请查看official+docs。|4477215|entityMap|0|LINK|mutability|MUTABLE|url|https://babeljs.io/docs/usage/babelrc/^0|1|H|M|N|0|D|N|0|0|0|0|0|J|I|0|J|D|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|W|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

Rename <code>webpack.config.js</code> to <code>webpack.config.babel.js</code>.

Then in .babelrc: <code>{"presets": ["es2015"]}</code>

However, if you want to use a different babel config for babel-cli, your .babelrc might look something like this:

<pre><code>{
 "env": {
 "babel-cli": {
 "presets": [["es2015", {"modules": false}]]
 },
 "production": {
 "presets": ["es2015"]
 },
 "development": {
 "presets": ["es2015"]
 }
 }
}
</code></pre>

And in package.json:

<pre><code>{
 "scripts": {
 "babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
 "build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
 ...
 },
 ...
}
</code></pre>

It's dumb but the <code>{"modules": false}</code> will break webpack if you don't use different envs.

For more info about .babelrc, check the <a href="https://babeljs.io/docs/usage/babelrc/" rel="nofollow noreferrer">official docs</a>.

blocks|key|4477255|text|我没有足够的代表来发表评论，但我想为任何TypeScript用户添加一个类似于上面@Sandrik的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4477256|我有两个脚本，指向包含ES6语法的webpack配置(JS文件)。|4477257|"start-dev":+"./node_modules/.bin/ts-node+./node_modules/webpack-dev-server/bin/webpack-dev-server.js+--config+./webpack/webpack.config.dev.js"|offset|length|style|CODE|4477258|和|4477259|"build":+"./node_modules/.bin/ts-node+./node_modules/webpack/bin/webpack.js+--config+webpack/webpack.config.js"|4477260|entityMap^0|0|0|0|3Z|0|0|0|33|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@$F|S|G|T|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@$F|W|G|X|H|I]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

Don't have enough rep to comment, but I wanted to add for any TypeScript users out there a similar solution to @Sandrik above

I have two scripts that I use pointing to webpack configs (JS files) that contain ES6 syntax. 

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

and

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

blocks|key|4477294|text|使用Webpack+4和巴别塔7|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4477295|要将webpack配置文件设置为使用ES2015，需要使用Babel：|4477296|安装开发依赖项：|4477297|npm+i+-D++webpack+\
++++++++++webpack-cli+\
++++++++++webpack-dev-server+\
++++++++++@babel/core+\
++++++++++@babel/register+\
++++++++++@babel/preset-env
npm+i+-D++html-webpack-plugin|code-block|syntax|javascript|4477298|创建.babelrc文件：|offset|length|style|CODE|4477299|{
++"presets":+["@babel/preset-env"]
}|4477300|创建您的webpack配置，webpack.config.babel.js|4477301|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;|4477302|在package.json中创建脚本|4477303|++"scripts":+{
++++"test":+"echo+\"Error:+no+test+specified\"+&&+exit+1",
++++"build":+"webpack",
++++"start":+"webpack-dev-server+--open"
++},|4477304|运行npm+run+build和npm+start。|4477305|webpack的配置基于一个示例项目，目录结构如下：|4477306|├──+README.md
├──+package-lock.json
├──+package.json
├──+src
│  +├──+Greeter.js
│  +├──+index.html
│  +└──+index.js
└──+webpack.config.babel.js|4477307|示例项目：Webpack+Configuration+Language+Using+Babel|4477308|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/stormwild/webpack-babel^0|0|0|0|0|2|8|0|0|E|N|0|0|1|C|0|0|2|D|G|9|0|0|0|5|16|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1J|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1K|8|@$M|1L|N|1M|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1N|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1O|8|@$M|1P|N|1Q|O|P]]|9|@]|A|$]]|$1|U|3|V|5|H|7|1R|8|@]|9|@]|A|$I|J]]|$1|W|3|X|5|6|7|1S|8|@$M|1T|N|1U|O|P]]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1V|8|@]|9|@]|A|$I|J]]|$1|10|3|11|5|6|7|1W|8|@$M|1X|N|1Y|O|P]|$M|1Z|N|20|O|P]]|9|@]|A|$]]|$1|12|3|13|5|6|7|21|8|@]|9|@]|A|$]]|$1|14|3|15|5|H|7|22|8|@]|9|@]|A|$I|J]]|$1|16|3|17|5|6|7|23|8|@]|9|@$M|24|N|25|1|26]]|A|$]]|$1|18|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|19|$1A|$5|1B|1C|1D|A|$1E|1F]]]]

<h2>Using Webpack 4 and Babel 7</h2>

To setup a webpack configuration file to use ES2015 requires Babel:

Install dev dependencies:

<pre class="lang-sh prettyprint-override"><code>npm i -D webpack \
 webpack-cli \
 webpack-dev-server \
 @babel/core \
 @babel/register \
 @babel/preset-env
npm i -D html-webpack-plugin
</code></pre>

Create a <code>.babelrc</code> file:

<pre><code>{
 "presets": ["@babel/preset-env"]
}
</code></pre>

Create your webpack config, <code>webpack.config.babel.js</code>:

<pre class="lang-js prettyprint-override"><code>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;
</code></pre>

Create your scripts in <code>package.json</code>:

<pre><code> "scripts": {
 "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
 "build": "webpack",
 "start": "webpack-dev-server --open"
 },
</code></pre>

Run <code>npm run build</code> and <code>npm start</code>.

The webpack config is based on a sample project with the following directory structure:

<pre class="lang-sh prettyprint-override"><code>├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── Greeter.js
│   ├── index.html
│   └── index.js
└── webpack.config.babel.js
</code></pre>

Sample project: <a href="https://github.com/stormwild/webpack-babel" rel="nofollow noreferrer">Webpack Configuration Language Using Babel</a>

blocks|key|4477165|text|我使用npm脚本的最佳方法是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4477166|node+-r+babel-register+./node_modules/webpack/bin/webpack|code-block|syntax|javascript|4477167|并根据您对Babel的要求配置其余脚本|offset|length|4477168|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/babel/^0|0|0|5|5|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

My Best approach along with npm script is 

<pre><code>node -r babel-register ./node_modules/webpack/bin/webpack
</code></pre>

and configure rest of scripts as per your requirement for <a href="https://github.com/babel/" rel="nofollow noreferrer">Babel</a>

blocks|key|4477326|text|您不能。您必须使用babel或esm将其转换为CommonJS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4477327|https://github.com/webpack/webpack-cli/issues/282|4477328|但是你可以运行webpack+-r+esm+@babel/register|4477329|entityMap|0|LINK|mutability|MUTABLE|url^0|9|5|F|3|0|0|1D|0|0|7|U|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|H|3|I|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]]]

You can't. You have to convert it to CommonJS, either with <code>babel</code> or <code>esm</code>.
<a href="https://github.com/webpack/webpack-cli/issues/282" rel="nofollow noreferrer">https://github.com/webpack/webpack-cli/issues/282</a>
But you can run <code>webpack -r esm @babel/register</code>

How to use ES6 in webpack.config ?
Like this repo 
<a href="https://github.com/kriasoft/react-starter-kit">https://github.com/kriasoft/react-starter-kit</a>
does ?

For instance:

using this



<pre class="lang-javascript prettyprint-override"><code>import webpack from 'webpack';
</code></pre>

instead of

<pre class="lang-javascript prettyprint-override"><code>var webpack = require('webpack');
</code></pre>

It is quite a curiosity rather than a need.

How can I use ES6 in webpack.config.js?

TypeScript

如何在webpack.config中使用ES6？就像这个repo 做的那样？例如：使用这个import webpack from 'webpack';而不是var webpack = require('webpack');这是一种好奇，而不是一种需要。

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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