13 thoughts on “Allow webpack.config.js to be written in ES6

  1. @sokra Sorry to reply on a closed issue, but I can not find any documentation about how webpack.config.babel.js works. Can you tell me if it is support by Webpack or Babel?

  2. @darkbaby123 From what I can recall, you can trigger a loader this way. For instance: webpack.config.babel.js should trigger babel-loader. So the syntax is: webpack.config.[LOADER].js… but it could’Ve changed over time.

  3. anyone able to get this to work?, I’m using webpack@2.1.0-beta.5``webpack-dev-server@2.0.0-beta and get the typical errors when renaming my config to webpack.config.babel.js

    $ webpack-dev-server --open --inline --hot --env dev

  4. I also ran into this issue after upgrading to webpack 2 beta 21.

    The solution for me was:

    1. In .babelrc, use es2015 with commonjs modules
    2. In your webpack config override .babelrc by passing babel-loader a query
    {
        test: /\.js$/,
        exclude: ['node_modules'],
        loader: 'babel',
        query: {
            babelrc: false,
            presets: [
                ['es2015', { modules: false }],
            ],
        },
    },

    As long as babel-loader receives modules: false before building your project, webpack.config.babel.js can be written in es6/es7! 👍


    For maintainability, I import .babelrc and pass an edited version to babel-loader.

    .babelrc

    {
        "sourceMaps": "both",
        "presets": [
            "es2016",
            ["es2015", { "modules": "commonjs"}],
            "stage-0",
            "react"
        ]
    }

    webpack.client.config.babel.js

    const babelrcJson = JSON.parse(readFileSync('.babelrc'));
    const babelrc = {
        ...babelrcJson,
        babelrc: false,
    };
    babelrc.presets.forEach((preset, index) => {
        if (preset[0] === 'es2015') {
            babelrc.presets[index][1].modules = false;
            return;
        }
    });
  5. I achieved this by changing my build script to the following:

    node -r babel-register node_modules/.bin/webpack -p --config=webpack.config.js
    
  6. so all of this is pretty complex. how about just:

    package.json:

    {
      ...,
      "devDependencies": {
        // basics to get webpack.config.babel.js to run
        "babel-core": "^6.18.2",  // so webpack can use babel-core/register for webpack.config.babel.js
        "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",  // node can do almost everything except import syntax
        "webpack": "^2.0.1-beta",
        // for the app code
        "babel-loader": "^6.2.7",
        "babel-preset-react": "^6.16.0",  // example preset needed for the app code
      },
      "babel": { "plugins": ["transform-es2015-modules-commonjs"] }, // this is just for webpack.config.babel.js
      ...
    }

    webpack.config.babel.js:

    import webpack from 'webpack'
    ...
    
    export default {
      entry: {
        ...,
      },
      module: {
        loaders: [
          {
            loader: 'babel-loader',
            test: ...,
            query: {
              presets: ['react'],
            },
          },
        ]
      },
    }

    i’m mainly writing this for my trip-up: i forgot babel-core, so i just got “invalid syntax import” because webpack failed to load any import hook.

  7. worked with this deps (I had to add @babel/register and @babel/runtime)

        "@babel/core": "^7.0.0-beta.33",
        "@babel/plugin-transform-runtime": "^7.0.0-beta.33",
        "@babel/preset-env": "^7.0.0-beta.33",
        "@babel/preset-react": "^7.0.0-beta.33",
        "@babel/register": "^7.0.0-beta.33",
        "@babel/runtime": "^7.0.0-beta.33",
        "babel-eslint": "^8.0.3",
        "babel-loader": "^7.1.2",
        "babel-preset-react-optimize": "^1.0.1",
  8. Below is my way to write webpack config with Babel:

    • rename webpack.confg.js to webpack.config.babel.js, make babel-loader can handler webpack config
    • turn off preset option module: false in .babelrc, because Node.js will execute the result of webpack.config.babel.js, if you keep module: false, the result will have import keyword, Node.js only know require in current LTS ‘Carbon’ version.
    • add env to .babelrc, make webpack can do Tree Shaking if you need it. babel has env option in .babelrc , it uses process.env.BABEL_ENV or process.env.NODE_ENV to distinguish environment. You can set module: false in production mode.

    Here is my .babelrc:

    {
      "presets": ["env", "stage-2"],
      "plugins": [],
      "env": {
        "production": {
          "presets": [["env", { "modules": false, "useBuiltIns": true }], "stage-2"]
        }
      }
    }
    

    Also, I create a webpack boilerplate, it using es6 to write webpack config:webpack-application-boilerplate .

  9. I you want to have modules=false for your code but not for webpack, with Babel@7 in your .babelr you can do this:

    {
      "presets": [
        ["@babel/preset-env", { "modules": false }],
        "@babel/preset-react",
      ],
      "plugins": ["@babel/plugin-proposal-class-properties"],
      "overrides": [{
        "test": ["./config"],
        "presets": [
          ["@babel/preset-env"]
        ]
      }]
    }
    

    ./config is where I put my webpack.config.babel.js

    works like a charm

Comments are closed.