Làm cách nào tôi có thể sử dụng ES6 trong webpack.config.js?

Làm cách nào để sử dụng ES6 trong webpack.config? Thích repo này https://github.com/kriasoft/react-starter-kit nào?

Ví dụ:

Sử dụng cái này

import webpack from 'webpack';

thay vì

var webpack = require('webpack');

Đó là một sự tò mò hơn là một nhu cầu.

Hãy thử đặt tên cấu hình của bạn là webpack.config.babel.js. Bạn nên có đăng ký babel trong dự án. Ví dụ tại Reac-router-bootstrap .

Webpack dựa vào diễn giải nội bộ để thực hiện công việc này.

Thay thế cho những gì @bebraw gợi ý, bạn có thể tạo tập lệnh tự động hóa JavaScript với cú pháp ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

Và thực hiện nó với babel:

$ babel-node tools/bundle

PS : Gọi gói web qua API JavaScript có thể là một cách tiếp cận tốt hơn (bằng cách gọi nó qua một dòng lệnh) khi bạn cần thực hiện các bước xây dựng phức tạp hơn. Ví dụ: sau khi gói phía máy chủ đã sẵn sàng, khởi động máy chủ ứng dụng Node.js và ngay sau khi máy chủ Node.js được khởi động, hãy khởi chạy máy chủ dev của BrowserSync.

Xem thêm:

• Phản ứng Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• Phản ứng tĩnh Boilerplate ( run.js, webpack.config.js, node run)
• Bạn có thể không cần Gulp.js

Một cách tiếp cận khác là có một kịch bản npm như thế này : "webpack": "babel-node ./node_modules/webpack/bin/webpack", và chạy nó như vậy : npm run webpack.

Tôi gặp sự cố khi giải pháp của @ Juho chạy với Webpack 2. Các tài liệu di chuyển Webpack đề nghị bạn chuyển phân tích mô-đun babel:

Điều quan trọng cần lưu ý là bạn sẽ muốn nói với Babel không phân tích các ký hiệu mô-đun này để webpack có thể sử dụng chúng. Bạn có thể làm điều này bằng cách đặt các tùy chọn sau trong các tùy chọn .babelrc hoặc babel-loader của bạn.

.babelrc:

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

Đáng buồn thay, điều này mâu thuẫn với chức năng đăng ký babel tự động. Đang gỡ bỏ

{ "modules": false }

từ cấu hình babel có những thứ chạy lại. Tuy nhiên, điều này sẽ dẫn đến phá vỡ rung cây, do đó, một giải pháp hoàn chỉnh sẽ liên quan đến việc ghi đè lên các cài đặt trước trong các tùy chọn trình tải :

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

Chỉnh sửa , ngày 13 tháng 11 năm 2017; cập nhật đoạn mã cấu hình webpack lên Webpack 3 (nhờ @ x-yuri). Cũ, Webpack 2 đoạn:

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

Điều này thực sự dễ dàng, nhưng tôi không rõ ràng trong bất kỳ câu trả lời nào, vì vậy nếu có ai khác nhầm lẫn như tôi:

Chỉ cần thêm .babelvào phần tên tệp của bạn trước phần mở rộng (giả sử rằng bạn đã babel-registercài đặt như một phần phụ thuộc).

Thí dụ:

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

Đây là những gì làm việc cho tôi bằng cách sử dụng webpack 4:

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

Bạn có thể thấy rõ từng phụ thuộc được sử dụng như thế nào, vì vậy không có gì ngạc nhiên ở đó.

Lưu ý tôi đang sử dụng webpack-serve--require , nhưng nếu bạn muốn sử dụng webpacklệnh thay thế, hãy thay thế nó bằng webpack --config-register. Trong cả hai trường hợp,@babel/register là cần thiết để làm cho công việc này.

Và đó là nó!

yarn dev

Và bạn có thể sử dụng es6trong cấu hình!

Đối với webpack-dev-server, sử dụng --config-registertùy chọn giống như với webpacklệnh

GHI CHÚ:

KHÔNG cần đổi tên tập tin cấu hình thành webpack.config.babel.js(như được đề xuất bởi câu trả lời được chấp nhận). webpack.config.jssẽ làm việc tốt

Một cách nữa là sử dụng đối số yêu cầu cho nút:

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

Tìm thấy cách này trong phản ứng điện tử-nồi hơi , nhìn vào build-mainvà build-renderercác kịch bản.

Cấu hình cho Babel 7 & Webpack 4

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

Đổi tên webpack.config.jsthành webpack.config.babel.js.

Sau đó, trong .babelrc: {"presets": ["es2015"]}

Tuy nhiên, nếu bạn muốn sử dụng một cấu hình babel khác cho babel-cli, .babelrc của bạn có thể trông giống như thế này:

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

Và trong gói.json:

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

Thật ngu ngốc nhưng {"modules": false}sẽ phá vỡ gói webpack nếu bạn không sử dụng các env khác nhau.

Để biết thêm thông tin về .babelrc, hãy kiểm tra các tài liệu chính thức .

Đối với TypeScript : trực tiếp từ https://webpack.js.org/configuration/configuration-lacular/

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

sau đó tiến hành viết, ví dụ: 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;

Kiểm tra liên kết để biết thêm chi tiết nơi bạn có thể sử dụng plugin để có tệp tsconfig riêng cho cấu hình webpack nếu bạn không nhắm mục tiêu chungjs (đây là một req để điều này hoạt động vì nó phụ thuộc vào nút ts).

Không có đủ đại diện để bình luận, nhưng tôi muốn thêm cho bất kỳ người dùng TypeScript nào ngoài đó có một giải pháp tương tự với @Sandrik ở trên

Tôi có hai tập lệnh mà tôi sử dụng trỏ đến cấu hình webpack (tệp JS) có chứa cú pháp ES6.

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

và

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

Cách tiếp cận tốt nhất của tôi cùng với kịch bản npm là

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

và cấu hình phần còn lại của tập lệnh theo yêu cầu của bạn cho Babel

Sau hàng tấn tài liệu ...

1. Chỉ cần cài đặt sẵn es2015 (không phải env !!!) và thêm nó vào

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

2. Đổi tên webpack.config.jsthànhwebpack.config.babel.js

Sử dụng Webpack 4 và Babel 7

Để thiết lập tệp cấu hình webpack để sử dụng ES2015 cần có Babel:

Cài đặt phụ thuộc dev:

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

Tạo một .babelrctệp:

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

Tạo cấu hình webpack của bạn , 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;

Tạo tập lệnh của bạn trong package.json:

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

Chạy npm run buildvà npm start.

Cấu hình webpack dựa trên một dự án mẫu với cấu trúc thư mục sau:

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

Dự án mẫu: Ngôn ngữ cấu hình Webpack bằng Babel

Thêm es6 vào webpack là một quá trình 3 bước

1. Trong webpack.config.js thêm

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

   2. Tạo một .babel.rc và thêm vào bên trong nó

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

3. trong gói.json thêm

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