webpack.config.js에서 ES6을 어떻게 사용합니까?

webpack.config에서 ES6을 사용하는 방법은 무엇입니까? 이 repo https://github.com/kriasoft/react-starter-kit 처럼 ?

예를 들어 :

이것을 사용하여

import webpack from 'webpack';

대신에

var webpack = require('webpack');

그것은 필요보다는 오히려 호기심입니다.

구성 이름을로 지정하십시오 webpack.config.babel.js. 당신은해야 바벨가 등록 프로젝트에 포함되어 있습니다. 예에서 반응 라우터 - 부트 스트랩 .

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로 실행하십시오.

$ babel-node tools/bundle

추신 : 더 복잡한 빌드 단계를 구현해야 할 때 JavaScript API를 통해 웹 팩을 호출하는 것이 명령 줄을 통해 호출하는 것보다 더 나은 방법 일 수 있습니다. 예를 들어 서버 측 번들이 준비되면 Node.js 앱 서버를 시작하고 Node.js 서버가 시작된 직후 BrowserSync dev 서버를 시작하십시오.

또한보십시오:

• 반응 스타터 키트 ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• 반응 정적 상용구 ( run.js, webpack.config.js, node run)
• Gulp.js가 필요하지 않을 수 있습니다

또 다른 방법은 다음과 같은 npm 스크립트를 사용하여 다음 "webpack": "babel-node ./node_modules/webpack/bin/webpack"과 같이 실행하는 것 npm run webpack입니다.

내가 웹팩 2. 실행 Juho의 솔루션 @ 점점 문제가 있었다 웹팩 마이그레이션 문서를 당신이 바벨 모듈 분석의 설정하는 것이 좋습니다 :

웹팩에서 사용할 수 있도록 이러한 모듈 기호를 구문 분석하지 않도록 Babel에 알리고 싶을 것입니다. .babelrc 또는 babel-loader 옵션에서 다음을 설정하여이 작업을 수행 할 수 있습니다.

.babelrc :

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

슬프게도 이것은 자동 babel register 기능과 충돌합니다. 풀이

{ "modules": false }

babel 구성에서 일이 다시 실행되었습니다. 그러나 이로 인해 트리 셰이 킹이 중단되므로 전체 솔루션 에는 로더 옵션의 사전 설정을 덮어 쓰는 것이 포함됩니다 .

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

이것은 정말 쉽지만, 어떤 대답에서도 나에게 분명하지 않았으므로 다른 사람이 나와 같은 혼란 스러울 경우 :

.babel확장명 앞에 파일 이름의 일부를 추가 하십시오 ( babel-register종속성으로 설치 되었다고 가정 ).

예:

mv webpack.config.js webpack.config.babel.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사용하십시오.--config-registerwebpack

노트:

구성 파일의 이름을 webpack.config.babel.js(허용 된 답변에서 제안한대로) 바꿀 필요가 없습니다 . webpack.config.js잘 작동합니다.

또 다른 방법은 노드에 require 인수를 사용하는 것입니다.

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

이 방법을 찾을 전자 반응 - 보일러 ,보기에서 build-main와 build-renderer스크립트.

위한 구성 바벨 7 및 웹팩 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'
        },

로 이름 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에 대한 자세한 내용은 공식 문서를 확인하십시오 .

대한 타이프 : 직선에서 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를 대상으로하지 않는 경우 플러그인을 사용하여 웹 팩 구성에 대해 별도의 tsconfig 파일을 가질 수있는 플러그인에 대한 자세한 내용은 링크를 확인하십시오 (ts-node에 의존하기 때문에 이것이 작동해야합니다).

의견을 말할 충분한 담당자가 없지만 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"

npm 스크립트와 함께하는 가장 좋은 방법은

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

Babel 요구 사항에 따라 나머지 스크립트를 구성하십시오.

수많은 문서 후에 ...

1. es2015 사전 설정 (env !!! 아님)을 설치하고 추가하십시오.

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

2. 귀하의 이름 webpack.config.js을webpack.config.babel.js

Webpack 4 및 Babel 7 사용

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

웹팩 구성은 다음 디렉토리 구조의 샘플 프로젝트를 기반으로합니다.

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

샘플 프로젝트 : Babel을 사용한 Webpack 구성 언어

웹팩에 es6 추가는 3 단계 프로세스입니다.

1. 에서 webpack.config.js 추가

   module:{
   
             rules:[
               {
                 test: /\.js$/,
                 loader: 'babel-loader'
               }
             ]
          }
   

   2. 크리에이트 .babel.rc을 하고 그 안에 추가

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}

3. 에 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

당신은 할 수 없습니다. 당신과 하나, CommonJS로 변환해야 babel하거나 esm.

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

그러나 당신은 실행할 수 있습니다 webpack -r esm @babel/register