WebPack - Applying Webpack to a Real Project


A Real World Project

src:
https://github.com/StephenGrider/WebpackProject

$ git clone https://github.com/StephenGrider/WebpackProject.git

# cd WebpackProject/
# npm install


Setting Up Babel

webpack.config.js


module: {
rules: [
    {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
    },
    {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
    }
]
}


Minimum Webpack Config

.babelrc


{
    "presets": ["babel-preset-env", "react"]
}


# npm run build


Vendor Asset Caching


Vendor Asset Caching


Vendor Asset Caching


Vendor Asset Caching


Refactoring for Vendor Splitting

webpack.config.js


const VENDOR_LIBS = [
    'faker', 
    'lodash',
    'react',
    'react-dom',
    'react-input-range',
    'react-redux',
    'react-router',
    'redux',
    'redux-form',
    'redux-thunk'
];

module.exports = {
  entry: {
      bundle: './src/index.js',
      vendor: VENDOR_LIBS
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
},


# npm run build


Effect of Code Splitting


Effect of Code Splitting


webpack.config.js


plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
    })
]


Troubleshooting Vendor Bundles

# npm install --save-dev html-webpack-plugin


    webpack.config.js


***

var HtmlWebpackPlugin = require('html-webpack-plugin');

***

new HtmlWebpackPlugin({
    template: 'src/index.html'
})


Chunk Hashing for Cache Busting


    webpack.config.js


***

filename: '[name].[chunkhash].js'

***

names: ['vendor', 'manifest']


Cleaning Project Files

# npm install --save-dev rimraf


package.json


"scripts": {
  "clean": "rimraf dist",
  "build": "npm run clean && webpack"
},


# npm run build