¿Cómo puedo usar ES6 en webpack.config.js?

¿Cómo usar ES6 en webpack.config? Me gusta este repositorio https://github.com/kriasoft/react-starter-kit ?

Por ejemplo:

usando esto

import webpack from 'webpack';

en vez de

var webpack = require('webpack');

Es una curiosidad más que una necesidad.

Intenta nombrar tu configuración como webpack.config.babel.js. Debería tener babel-register incluido en el proyecto. Ejemplo en react-router-bootstrap .

Webpack se basa en la interpretación interna para que esto funcione.

Como alternativa a lo que sugiere @bebraw, puede crear un script de automatización de JavaScript con sintaxis ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

Y ejecutarlo con babel:

$ babel-node tools/bundle

PD : Llamar a webpack a través de la API de JavaScript podría ser un mejor enfoque (que llamarlo a través de una línea de comando) cuando necesita implementar pasos de compilación más complejos. Por ejemplo, después de que el paquete del lado del servidor esté listo, inicie el servidor de aplicaciones Node.js, y justo después de que se inicie el servidor Node.js, inicie el servidor de desarrollo BrowserSync.

Ver también:

• Reaccionar Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• Reaccionar estático Boilerplate ( run.js, webpack.config.js, node run)
• Es posible que no necesite Gulp.js

Otro enfoque es tener un guión NPM como esta: "webpack": "babel-node ./node_modules/webpack/bin/webpack"y ejecutarlo así: npm run webpack.

Tuve un problema al ejecutar la solución de @ Juho con Webpack 2. Los documentos de migración de Webpack sugieren que desactive el análisis del módulo babel:

Es importante tener en cuenta que querrá decirle a Babel que no analice estos símbolos de módulo para que webpack pueda usarlos. Puede hacerlo configurando lo siguiente en sus opciones .babelrc o babel-loader.

.babelrc:

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

Lamentablemente, esto entra en conflicto con la funcionalidad de registro automático de babel. Quitando

{ "modules": false }

desde la configuración de babel, las cosas volvieron a funcionar Sin embargo, esto daría como resultado la sacudida del árbol, por lo que una solución completa implicaría sobrescribir los ajustes preestablecidos en las opciones del cargador :

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

Edición , 13 de noviembre de 2017; fragmento de configuración de webpack actualizado a Webpack 3 (gracias a @ x-yuri). Viejo fragmento de Webpack 2:

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

Esto es realmente fácil, pero no fue obvio para mí por ninguna de las respuestas, así que si alguien más está confundido como yo:

Simplemente agregue .babella parte de su nombre de archivo antes de la extensión (suponiendo que tengababel-register instalado como una dependencia).

Ejemplo:

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

Esto es lo que funcionó para mí usando webpack 4:

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

Puede ver claramente cómo se usa cada dependencia, por lo que no hay sorpresas allí.

Tenga en cuenta que estoy usando webpack-serve--require , pero si desea usar el webpackcomando en su lugar, reemplácelo con webpack --config-register. En cualquier caso, @babel/registeres necesario para que esto funcione.

¡Y eso es!

yarn dev

¡Y puedes usarlo es6en la configuración!

Para webpack-dev-server, use la --config-registeropción que es la misma que con el webpackcomando

NOTA:

NO es necesario cambiar el nombre del archivo de configuración a webpack.config.babel.js(como lo sugiere la respuesta aceptada). webpack.config.jsfuncionará bien.

Una forma más es usar el argumento require para el nodo:

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

Encontrado de esta manera en electron-react-boilerplate , mira build-mainy build-rendererscripts.

Configuración para Babel 7 y 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'
        },

Renombrar webpack.config.jsawebpack.config.babel.js .

Luego en .babelrc: {"presets": ["es2015"]}

Sin embargo, si desea utilizar una configuración de babel diferente para babel-cli, su .babelrc podría verse así:

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

Y en 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",
    ...
  },
  ...
}

Es tonto pero el {"modules": false} romperá el paquete web si no usa diferentes envs.

Para obtener más información sobre .babelrc, consulte los documentos oficiales .

Para TypeScript : directamente desde 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

luego proceda a escribir su, por ejemplo: 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;

Consulte el enlace para obtener más detalles donde puede usar un complemento para tener un archivo tsconfig separado solo para la configuración del paquete web si no está apuntando a commonjs (que es un requisito para que esto funcione ya que se basa en el nodo ts).

No tengo suficiente representante para comentar, pero quería agregar para cualquier usuario de TypeScript una solución similar a @Sandrik arriba

Tengo dos scripts que utilizo apuntando a configuraciones de paquete web (archivos JS) que contienen la sintaxis ES6.

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

y

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

Mi mejor enfoque junto con el script npm es

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

y configure el resto de los scripts según sus requisitos para Babel

Después de toneladas de los documentos ...

1. Simplemente instale el preestablecido es2015 (no env !!!) y agréguelo a

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

2. Renombra tu webpack.config.jsawebpack.config.babel.js

Usando Webpack 4 y Babel 7

Para configurar un archivo de configuración de paquete web para usar ES2015 requiere Babel:

Instalar dependencias de desarrollo:

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

Crea un .babelrcarchivo:

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

Cree su configuración de paquete web 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;

Crea tus scripts en package.json:

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

Corre npm run buildy npm start.

La configuración del paquete web se basa en un proyecto de muestra con la siguiente estructura de directorios:

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

Proyecto de muestra: Lenguaje de configuración de paquete web con Babel

Agregar es6 a webpack es un proceso de 3 pasos

1. En webpack.config.js agregue

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

   2. Cree un .babel.rc y agréguelo dentro

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

3. en package.json agregar

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

No puedes Tienes que convertirlo a CommonJS, ya sea con babelo esm.

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

Pero puedes correr webpack -r esm @babel/register