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

Program / 글쓴이

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 서버를 시작하십시오.

또한보십시오:

답변

또 다른 방법은 다음과 같은 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스크립트.