ES6 project scaffolding with the Webpack

Hi folks,

last time we spoke about the basic ES6 project boilerplate. We used browserify as bundling engine. I love Webpack as well so I’m glad to share the instruction for this awesome bundler.

Prepare the Webpack environment

  • mkdir bundle src; touch src/app.es6
    Your app and destination path may vary. Read the remark about the destination folder at the end of the article!
  • npm install --save-dev babel-core babel-loader
    npm install --save-dev webpack webpack-dev-server
    This is the basic list. You can add other Webpack loaders if you need ’em.

Merge following lines in the package.json

  "scripts": {
    "prod": "webpack --progress --colors",
    "dev": "webpack-dev-server --colors --hot"
  }

Create the webpack.config.js

module.exports = {
  entry: ['./src/app.es6'], // your app entry point may vary
  output: {
    path: __dirname + '/bundle',
    publicPath: '/bundle/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.es6?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  debug: true,
  devtool: 'source-map',
  devServer: {
      hot: true,
      inline: true
  }
};

Additional details

  • inject bundle/bundle.js into your index.html;
  • add bundle/bundle.js to the .gitignore.
    Pay attention, the bundle/bundle.* folder must exist, otherwise Webpack won’t compile the code.
    So you have to

    • create that folder,
    • make sure it’s not empty, otherwise git won’t commit it. I usually place the README.md there;
    • make sure that the folder itself is not included into .gitignore, just bundle/bundle.* files.

Now run npm run dev and go ahead with coding!
Pay attention, Webpack provides its own web server so you don’t need to use an external one for development.
Traditionally, npm run prod generates minified production JS.

Go ES6 not IE6!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s