CODEWITHSUNDEEP
javascriptwebpackecmascript-6
HendrikEng
HendrikEng

Reputation: 684

Transpiling in Webpack 2

I added

Babel Preset ENV

as well as babel-plugin-syntax-dynamic-import to my plugins to make it work, everything works fine now, however it still wont load in ie11, can't figure out why?

webpack.config:

const webpack = require('webpack');
const pkg = require('./package.json');
const path = require('path');

const debug = process.env.NODE_ENV !== 'prod';

module.exports = {
  context: __dirname,
  devtool: 'sourc-emap',
  entry: {
    app: `${pkg.paths.src.js}index.js`,
  },
  output: {
    path: path.resolve(__dirname) + pkg.paths.src.assets,
    filename: '[name].bundle.min.js',
    publicPath: '/assets/',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: debug
    ? [
    ]
    : [
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
      // new webpack2.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
    ],
};

.babelrc: 

{
  "presets": [
    ["es2015"],
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7", "ie 10-11"]
      }
    }]
  ],
  "plugins": ["babel-plugin-syntax-dynamic-import",
    "babel-plugin-add-module-exports"
  ]
}

my entry index.js:

const jsLoader = document.querySelector('.js-loader');

if (jsLoader) {
  import('./modules/loader.js')
    .then(module => module.loader);
}

and the module loader.js

const jsLoader = document.querySelector('.js-loader');
// hide loader on pageload
window.onload = function init() {
  jsLoader.style.display = 'none';
};

export default jsLoader;

its just a simple loader that should be hidden after the page loaded, only to figure out if it works in older browsers

Upvotes: 0

Views: 400

Answers (1)

Sean Larkin
Sean Larkin

Reputation: 6420

i figured that i don't have to use a babel loader for transpiling the es2015 code since webpack 2 will do it

webpack 2 does support the es2015 module syntax, and webpack 2 can successfully parse the es2015 language features out of the box. However, this does not guarantee your browser will, nor will webpack transform the module features.

Babel Preset ENV

In a situation like this, we recommend you use the the babel preset babel-preset-env. This will allow you to specify which browsers you are looking to support, and then subsequently leverage babel and babel-loader to only transpile the changes that are not natively supported.

Upvotes: 1

Related Questions