Jak mogę używać ES6 w webpack.config.js?

Jak korzystać z ES6 w webpack.config? Podobnie jak w przypadku tego repo https://github.com/kriasoft/react-starter-kit ?

Na przykład:

używając tego

import webpack from 'webpack';

zamiast

var webpack = require('webpack');

To raczej ciekawość niż potrzeba.

Spróbuj nazwać swoją konfigurację jako webpack.config.babel.js. Powinieneś mieć rejestr babel włączony do projektu. Przykład w React-Router-Bootstrap .

Aby to działało, Webpack polega na wewnętrznym tłumaczeniu .

Jako alternatywę dla sugestii @bebraw możesz utworzyć skrypt automatyzacji JavaScript ze składnią ES6 +:

// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);

I wykonaj to za pomocą babel:

$ babel-node tools/bundle

PS : Wywoływanie webpacka za pomocą JavaScript API może być lepszym podejściem (niż wywoływanie go z wiersza poleceń), gdy trzeba wdrożyć bardziej złożone kroki kompilacji. Np. Po przygotowaniu pakietu po stronie serwera uruchom serwer aplikacji Node.js, a zaraz po uruchomieniu serwera Node.js uruchom serwer dev BrowserSync.

Zobacz też:

• React Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• React statyczne Gotowa ( run.js, webpack.config.js, node run)
• Być może nie potrzebujesz Gulp.js

Innym rozwiązaniem jest mieć skrypt npm takiego: "webpack": "babel-node ./node_modules/webpack/bin/webpack"i uruchomić go tak: npm run webpack.

Miałem problem z uruchomieniem rozwiązania @ Juho w pakiecie Webpack 2. Dokumenty dotyczące migracji pakietu Webpack sugerują wyłączenie analizy składni modułu babel:

Ważne jest, aby pamiętać, że będziesz chciał powiedzieć Babelowi, aby nie analizował tych symboli modułów, aby webpack mógł ich użyć. Możesz to zrobić, ustawiając następujące opcje w opcjach .babelrc lub babel-loader.

.babelrc:

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

Niestety koliduje to z funkcją automatycznego rejestru babel. Usuwanie

{ "modules": false }

z konfiguracji Babel znów działało. Spowodowałoby to jednak przerwanie wstrząsania drzewem, więc kompletne rozwiązanie wymagałoby zastąpienia ustawień wstępnych w opcjach modułu ładującego :

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

Edycja , 13 listopada 2017 r .; zaktualizowany fragment konfiguracji webpacka do Webpack 3 (dzięki @ x-yuri). Stary fragment kodu pakietu Webpack 2:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

To jest naprawdę łatwe, ale nie było dla mnie oczywiste z żadnej z odpowiedzi, więc jeśli ktoś jest zdezorientowany jak ja:

Po prostu dołącz .babeldo części nazwy pliku przed rozszerzeniem (zakładając, że babel-registerzainstalowałeś jako zależność).

Przykład:

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

Oto, co działało dla mnie przy użyciu webpack 4:

W 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"
  ]
}

Możesz wyraźnie zobaczyć, w jaki sposób używana jest każda zależność, więc nie ma tam niespodzianek.

Uwaga: Używam webpack-serve--require , ale jeśli webpackzamiast tego chcesz użyć polecenia, zamień je na webpack --config-register. W obu przypadkach @babel/registerjest to konieczne, aby to zadziałało.

I to wszystko!

yarn dev

I możesz używać es6w konfiguracji!

Dla webpack-dev-serverużyj --config-registeropcji, która jest taka sama jak w przypadku webpackpolecenia

UWAGA:

NIE trzeba zmieniać nazwy pliku konfiguracyjnego na webpack.config.babel.js(jak sugeruje zaakceptowana odpowiedź). webpack.config.jsbędzie działać dobrze.

Jeszcze jednym sposobem jest użycie argumentu wymaganego dla węzła:

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

Znalezione w ten sposób w płytce reagującej elektronowo , spojrzeniu build-maini build-rendererskryptach.

Konfiguracja Babel 7 i Webpack 4

pakiet.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'
        },

Zmień nazwę webpack.config.jsna webpack.config.babel.js.

Następnie w .babelrc: {"presets": ["es2015"]}

Jeśli jednak chcesz użyć innej konfiguracji babel dla babel-cli, twój .babelrc może wyglądać mniej więcej tak:

{
  "env": {
    "babel-cli": {
      "presets": [["es2015", {"modules": false}]]
    },
    "production": {
      "presets": ["es2015"]
    },
    "development": {
      "presets": ["es2015"]
    }
  }
}

A w pakiecie.json:

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

To głupie, ale {"modules": false}zepsuje paczkę, jeśli nie użyjesz różnych env.

Aby uzyskać więcej informacji o .babelrc, sprawdź oficjalne dokumenty .

W przypadku TypeScript : prosto z 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

następnie kontynuuj pisanie np.: 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;

Sprawdź link, aby uzyskać więcej informacji, w których możesz użyć wtyczki, aby mieć osobny plik tsconfig tylko dla konfiguracji webpacka, jeśli nie celujesz w commonjs (co jest wymagane, aby działało, ponieważ opiera się na ts-node).

Nie mam wystarczającej liczby przedstawicieli do skomentowania, ale chciałem dodać dla każdego użytkownika TypeScript podobne rozwiązanie do @Sandrik powyżej

Mam dwa skrypty, których używam, wskazując na konfiguracje webpack (pliki JS), które zawierają składnię ES6.

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

i

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

Moje najlepsze podejście wraz ze skryptem npm to

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

i skonfiguruj pozostałe skrypty zgodnie z wymaganiami dla Babel

Po tonach dokumentów ...

1. Wystarczy zainstalować preset es2015 (nie env !!!) i dodać go do

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

2. Zmień nazwę webpack.config.jsnawebpack.config.babel.js

Korzystanie z Webpack 4 i Babel 7

Aby skonfigurować plik konfiguracyjny pakietu WWW do używania ES2015, wymagana jest Babel:

Zainstaluj zależności programistyczne:

npm i -D  webpack \
          webpack-cli \
          webpack-dev-server \
          @babel/core \
          @babel/register \
          @babel/preset-env
npm i -D  html-webpack-plugin

Utwórz .babelrcplik:

{
  "presets": ["@babel/preset-env"]
}

Utwórz konfigurację pakietu internetowego 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;

Utwórz swoje skrypty w package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

Uruchom npm run buildi npm start.

Konfiguracja webpacka oparta jest na przykładowym projekcie o następującej strukturze katalogów:

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

Przykładowy projekt: Webpack Configuration Language using Babel

Dodanie es6 do webpacka to 3-etapowy proces

1. W pliku webpack.config.js dodaj

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

   2. Utwórz plik .babel.rc i dodaj go

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

3. w pakiecie.json dodaj

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

Nie możesz Musisz przekonwertować go na CommonJS za pomocą babellub esm.

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

Ale możesz biegać webpack -r esm @babel/register