Bagaimana saya bisa menggunakan ES6 di webpack.config.js?

Bagaimana cara menggunakan ES6 di webpack.config? Suka repo ini https://github.com/kriasoft/react-starter-kit ?

Misalnya:

menggunakan ini

import webpack from 'webpack';

dari pada

var webpack = require('webpack');

Ini merupakan rasa ingin tahu daripada kebutuhan.

Coba beri nama konfigurasi Anda sebagai webpack.config.babel.js. Anda harus sudah mendaftar-babel dalam proyek ini. Contoh di react-router-bootstrap .

Webpack bergantung pada interpretasi internal untuk membuat pekerjaan ini.

Sebagai alternatif dari apa yang disarankan @bebraw, Anda dapat membuat skrip otomatisasi JavaScript dengan sintaks ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

Dan jalankan dengan babel:

$ babel-node tools/bundle

PS : Memanggil webpack melalui JavaScript API mungkin merupakan pendekatan yang lebih baik (daripada dengan memanggilnya melalui baris perintah) ketika Anda perlu menerapkan langkah-langkah membangun yang lebih kompleks. Misalnya setelah bundel sisi server siap, mulai server aplikasi Node.js, dan tepat setelah server Node.js dimulai, luncurkan server dev BrowserSync.

Lihat juga:

• Bereaksi Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• Bereaksi Static Boilerplate ( run.js, webpack.config.js, node run)
• Anda mungkin tidak perlu Gulp.js

Pendekatan lain adalah untuk memiliki script NPM seperti ini: "webpack": "babel-node ./node_modules/webpack/bin/webpack", dan menjalankannya seperti: npm run webpack.

Saya punya masalah dalam menjalankan solusi @ Juho dengan Webpack 2. Dokumen migrasi Webpack menyarankan Anda untuk beralih dari penguraian modul babel:

Penting untuk dicatat bahwa Anda ingin memberi tahu Babel untuk tidak menguraikan simbol-simbol modul ini sehingga webpack dapat menggunakannya. Anda dapat melakukan ini dengan mengatur yang berikut di opsi .babelrc atau babel-loader Anda.

.babelrc:

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

Sayangnya, ini bertentangan dengan fungsi register babel otomatis. Menghapus

{ "modules": false }

dari konfigurasi babel membuat semuanya berjalan kembali. Namun, ini akan menghasilkan pemecahan goncangan pohon, sehingga solusi lengkap akan melibatkan menimpa preset dalam opsi loader :

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

Edit , 13 November 2017; cuplikan konfigurasi webpack diperbarui ke Webpack 3 (terima kasih kepada @ x-yuri). Tua, cuplikan Webpack 2:

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

Ini benar-benar mudah, tetapi bagi saya tidak ada jawaban yang jelas, jadi jika orang lain bingung seperti saya:

Cukup tambahkan .babelke bagian nama file Anda sebelum ekstensi (dengan asumsi Anda milikibabel-register menginstal sebagai dependensi).

Contoh:

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

Inilah yang berhasil bagi saya menggunakan webpack 4:

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

Anda dapat dengan jelas melihat bagaimana setiap ketergantungan digunakan, jadi tidak ada kejutan di sana.

Catatan Saya menggunakan webpack-serve--require , tetapi jika Anda ingin menggunakan webpackperintah, ganti dengan webpack --config-register. Dalam kedua kasus tersebut,@babel/register diperlukan untuk membuat ini berfungsi.

Dan itu dia!

yarn dev

Dan Anda dapat menggunakannya es6di konfigurasi!

Untuk webpack-dev-server, gunakan --config-registeropsi yang sama dengan webpackperintah

CATATAN:

TIDAK perlu mengubah nama file konfigurasi menjadi webpack.config.babel.js(seperti yang disarankan oleh jawaban yang diterima). webpack.config.jsakan bekerja dengan baik.

Satu lagi cara adalah dengan menggunakan argumen argument untuk node:

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

Menemukan cara ini dalam pelat reaksi elektron , lihat, build-maindan build-rendererskrip.

Konfigurasi untuk Babel 7 & Webpack 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'
        },

Ganti nama webpack.config.jsmenjadiwebpack.config.babel.js .

Kemudian di .babelrc: {"presets": ["es2015"]}

Namun, jika Anda ingin menggunakan konfigurasi babel yang berbeda untuk babel-cli, .babelrc Anda mungkin terlihat seperti ini:

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

Dan di 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",
    ...
  },
  ...
}

Itu bodoh tapi {"modules": false} akan merusak webpack jika Anda tidak menggunakan env yang berbeda.

Untuk info lebih lanjut tentang .babelrc, periksa dokumen resmi .

Untuk TypeScript : langsung dari 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

kemudian lanjutkan menulis, misalnya: webpack.config.ts Anda

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;

Periksa tautan untuk perincian lebih lanjut di mana Anda dapat menggunakan plugin untuk memiliki file tsconfig terpisah hanya untuk konfigurasi webpack jika Anda tidak menargetkan commonjs (yang merupakan req untuk ini berfungsi karena bergantung pada ts-node).

Tidak punya cukup perwakilan untuk berkomentar, tapi saya ingin menambahkan untuk setiap pengguna TypeScript di luar sana solusi yang mirip dengan @Sandrik di atas

Saya memiliki dua skrip yang saya gunakan menunjuk ke konfigurasi webpack (file JS) yang berisi sintaks ES6.

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

dan

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

Pendekatan terbaik saya bersama dengan skrip npm adalah

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

dan konfigurasikan sisa skrip sesuai kebutuhan Anda untuk Babel

Setelah banyak dokumen ...

1. Cukup instal es2015 preset (bukan env !!!) dan tambahkan ke

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

2. Ganti nama webpack.config.jsuntukwebpack.config.babel.js

Menggunakan Webpack 4 dan Babel 7

Untuk menyiapkan file konfigurasi webpack untuk menggunakan ES2015 diperlukan Babel:

Instal dependensi dev:

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

Buat .babelrcfile:

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

Buat konfigurasi Webpack Anda, 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;

Buat skrip Anda di package.json:

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

Jalankan npm run builddan npm start.

Konfigurasi webpack didasarkan pada proyek sampel dengan struktur direktori berikut:

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

Contoh proyek: Bahasa Konfigurasi Webpack Menggunakan Babel

Menambahkan es6 ke webpack adalah proses 3 langkah

1. Di webpack.config.js tambahkan

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

   2. Buat .babel.rc dan tambahkan di dalamnya

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

3. di package.json tambahkan

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

Kamu tidak bisa Anda harus mengonversinya menjadi CommonJS, baik dengan babelatau esm.

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

Tapi kamu bisa lari webpack -r esm @babel/register