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

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

Por ejemplo:

usando esto

import webpack from 'webpack'; 

en lugar de

 var webpack = require('webpack'); 

Es más una curiosidad que una necesidad.

Intente nombrar su configuración como webpack.config.babel.js . Deberías tener babel-register incluido en el proyecto. Ejemplo en react-router-bootstrap .

Webpack se basa en interpretar internamente para que esto funcione.

Como alternativa a lo que sugiere @bebraw, puede crear un script de automatización JavaScript con syntax 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 un paquete web a través de la API de JavaScript podría ser un mejor enfoque (que llamarlo a través de una línea de comandos) cuando necesite implementar pasos de comstackción más complejos. Por ejemplo, después de que el paquete del lado del servidor esté listo, inicie el servidor de la aplicación Node.js y justo después de que se inicie el servidor Node.js, ejecute el servidor de desarrollo BrowserSync.

Ver también:

  • React Starter Kit ( package.json/scripts , tools/bundle.js , tools/webpack.config.js )
  • Repetir Static Boilerplate ( run.js , webpack.config.js , node run )
  • Es posible que no necesites Gulp.js

Otro enfoque es tener un script npm como este: "webpack": "babel-node ./node_modules/webpack/bin/webpack" , y ejecutarlo de la siguiente manera: npm run webpack .

Tuve un problema al ejecutar la solución de @ Juho con Webpack 2. Los documentos de migración de la carpeta web sugieren que se cambie 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 el paquete web pueda usarlos. Puede hacer esto configurando lo siguiente en sus opciones de .babelrc o babel-loader.

.babelrc:

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

Lamentablemente, esto entra en conflicto con la funcionalidad automática de registro de babel. Eliminando

 { "modules": false } 

desde la configuración de Babel, las cosas se volvieron a ejecutar. Sin embargo, esto daría como resultado la ruptura de tree-shaking, 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}]] } } ] } 

Editar , 13 de noviembre de 2017; fragmento de configuración de paquete web actualizado para 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 .babel a la parte de su nombre de archivo antes de la extensión (suponiendo que tiene babel-register instalado como una dependencia).

Ejemplo:

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

Una forma más es usar require argument para node:

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

Encontrado de esta manera en electron-reactjsr-repetición , vea los scripts build-main y build-renderer .

Cambie el nombre de webpack.config.js a webpack.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 más o menos 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 los {"modules": false} romperán el paquete web si no usas envs diferentes.

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

Mi mejor enfoque junto con el script npm es

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

y configure el rest de las secuencias de comandos según su requisito para Babel

No tengo suficientes representantes para comentar, pero quería agregar para cualquier usuario de TypeScript una solución similar a @Sandrik anterior

Tengo dos scripts que utilizo para apuntar a configuraciones de paquete web (archivos JS) que contienen syntax de 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"

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

Puedes ver claramente cómo se usa cada dependencia, así que no hay sorpresas allí.

Tenga en cuenta que estoy usando webpack-serve –require , pero si desea utilizar el comando webpack lugar, reemplácelo con el webpack --config-register . En cualquier caso, se necesita @babel/register para que esto funcione.

¡Y eso es!

yarn dev

¡Y puedes usar es6 en la configuración!


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.js funcionará bien.

Después de toneladas de documentos …

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

     .babelrc: { "presets": [ ["es2015", { "modules": false }] ] } 
  2. Cambie el nombre de su webpack.config.js a webpack.config.babel.js

    Intereting Posts