thejmazz/webpack.md

## webpack.md

      
    Raw
  

              webpack.md
            
          
    webpack quick guide


require
babel
extensions
styles
images
fonts
magic globals
multiple entries, common code
async loading
webpack-dev-server
react-hot-loader
all together now

require

npm install --save-dev webpack
# browserify main.js > bundle.js
webpack main.js bundle.js
webpack.config.js:
module.exports = {
  entry: './main.js'
  output: {
    filename: 'bundle.js'
  }
}
-p for optimization+minification, -d for source maps
babel

babel-loader
A loader is like a transform from browserify.
npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react
module.exports = {
  // ...
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }]
  }
}
.babelrc:
{
  "presets": ["es2015", "react"]
}
extensions

module.exports = {
  // ...
  resolve: {
    // require('./file') instead of require('./file.js')
    extensions: ['', '.js']
  }
}
styles

In your entry point(s), or per component,
// require('./styles.scss')
import './styles.scss'

style-loader  -> inline css into a style tag
css-loader -> resolves imports and url()

npm install --save-dev style-loader css-loader
// ...
{
  test: /\.css$/,
  loaders: ['style', 'css']
}
sass-loader -> { test: /\.scss$/, loaders:['style', 'css', 'sass'] }
npm install --save-dev sass-loader
PostCSS via

postcss-loader
postcss-import
autoprefixer
precss

npm install --save-dev postcss-loader postcss-import autoprefixer precss
module.exports = {
  // ...
  module: {
    loaders: [{
      test: /\.scss$/,
      loaders: ['style', 'css', 'postcss']
    }]
  },
  postcss: function (webpack) {
      return [
        require('postcss-import')({ addDependencyTo: webpack }),
        require('precss')(),
        require('autoprefixer')({ browsers: ['last 2 versions'] })
      ];
  }
}
images

import './banner.png'
url-loader
npm install --save-dev url-loader
// inline images as BASE64 strings if < 8kb
{
  test: /\.(png|jpg)$/,
  loader: 'url?limit=8192'
}
fonts

{
  test: /\.(woff2?|ttf|eot|svg)$/,
  loader: 'url?limit=100000'
}
magic globals

if (__DEV__) {
  console.log('Extra logging code for dev')
}
let globalsPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
  'process.env': {
      'NODE_ENV': JSON.stringify('development'),
   }
})

module.exports = {
  // ...
  plugins: [globalsPlugin]
}
multiple entries, common code

let commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js')

module.exports = {
  entry: {
    foo: './foo.js',
    bar: './bar.js'
  },
  output: {
    path: 'build',
    filename: '[name].js'
  },
  plugins: [commonsPlugin]
}
async loading

if (window.location.pathname === '/foo') {
  showLoadingState();
  require.ensure([], function() { // [] -> no other deps before this
    hideLoadingState();
    require('./foo.js').show(); // when this function is called, the module is guaranteed to be synchronously available.
  });
} else if (window.location.pathname === '/bar') {
  showLoadingState();
  require.ensure([], function() {
    hideLoadingState();
    require('./bar.js').show();
  });
}
webpack-dev-server

with hot module reload:
npm install --save-dev webpack-dev-server
module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000'
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './main.js'
  ],
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './build',
    colors: true,
    hot: true
  }
}
and go to http://localhost:3000/webpack-dev-server/bundle
Or make ./build/index.html:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>
and go to http://localhost:3000.
react-hot-loader

react-hot-loader (until this stabilizes)
npm install --save-dev react-hot-loader
{
  test: /\.js$/,
  loaders: ['react-hot', 'babel']
}
babel-plugin-react-transform

npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react babel-plugin-react-transform react-transform-hmr react-transform-catch-errors redbox-react
{
  "presets": ["es2015", "react"],
  "plugins": [
    ["react-transform", {
      "transforms": [{
        "transform": "react-transform-hmr",
        "imports": ["react"],
        "locals": ["module"]
      }, {
        "transform": "react-transform-catch-errors",
        "imports": ["react", "redbox-react"]
      }]
    }]
  ]
}
all together now

Babel(ES2015,React) + PostCSS(precss,autoprefixer) + HMR
npm install --save-dev webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react style-loader css-loader postcss-loader postcss-import autoprefixer precss url-loader react-hot-loader
const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    path.resolve(__dirname, 'src/main.js')
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loaders: ['react-hot', 'babel']
    }, {
      test: /\.scss$/,
      loaders: ['style', 'css', 'postcss']
    }, {
      test: /\.(png|jpg)$/,
      loader: 'url?limit=8192'
    }, {
      test: /\.(woff2?|ttf|eot|svg)$/,
      loader: 'url?limit=100000'
    }]
  },
  postcss: function (webpack) {
    return [
      require('postcss-import')({ addDependencyTo: webpack }),
      require('precss')(),
      require('autoprefixer')({ browsers: ['last 2 versions'] })
    ];
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'build'),
    colors: true,
    hot: true
  }
}
.babelrc:
{
  "presets": ["es2015", "react"]
}
bootstrap

npm install --save-dev css-loader node-sass resolve-url-loader sass-loader style-loader url-loader bootstrap-loader imports-loader
npm install --save jquery