All notes
Webpack

Installation


npm install -D babel-loader babel-core babel-preset-env babel-preset-react webpack

Commandline


webpack --progress --colors --watch ./entry.js bundle.js

# Without any webpack.config.js, specify entry and output directly:
# webpack entry [more entry...] output
./node_modules/.bin/webpack src/index.js dist/bundle.js

# Development shortcut -d. Equals to --debug --devtool source-map --output-pathinfo
# Production shortcut -p. Equals to --optimize-minimize --optimize-occurrence-order. wcfNote: it's not --progress!

# Watch mode --watch, -w
# Display options --progress

# Configuration file --config example.config.js. webpack.config.js is the default.

webpack.config.js:


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

module.exports = {
  entry: {
    app: "./index.js",
    vendor: [ 'react', 'react-dom' ]
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

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

  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
      favicon: './favicon.ico'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],

  devServer: {
    hot: true, // Tell the dev-server we're using HMR
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
};

webpack-dev-server

webpack.github.io: webpack dev server.


# webpack.config.js

var path = require("path");
module.exports = {
  entry: {
    app: [
      "webpack-dev-server/client?http://localhost:8080/",
      "./app/main.js"
    ]
  },
  output: {
    path: path.resolve(__dirname, "build"), // Build path.
    publicPath: "/assets", // Mount path for dev server.
    filename: "bundle.js"
  }
};

npm install -D webpack webpack-dev-server

# --no-info: suppress boring information.
# --host, --port
# --open: opens the url in default browser (for webpack-dev-server versions > 2.0).

# This binds a small express server on localhost:8080 which serves your static assets as well as the bundle.
webpack-dev-server --progress --colors --open --compress --no-info --content-base build/

# Then goto:
# http://localhost:8080/ for inline automatic refresh mode (must add a small webpack-dev-server client entry to the bundle).
# http://localhost:8080/webpack-dev-server/ for iframe automatic refersh mode.

# --inline: embed the webpack-dev-server runtime into the bundle.
# --hot: adds the HotModuleReplacementPlugin and switch the server to hot mode.
# --hot --inline also adds the "webpack/hot/dev-server" entry.

# --https: serves webpack-dev-server over HTTPS Protocol. Includes a self-signed certificate that is used when serving the requests.
# --cert, --cacert, --key: Paths the certificate files.

# --client-log-level: controls the console log messages shown in the browser. Use error, warning, info or none.

publicPath

The modified bundle is served from memory at the relative path specified in publicPath, e.g. "localhost:8080/assets/bundle.js". It will not be written to your configured output directory.

Reference

Configuration

module

github.io: webpack configuration module.



// test: A condition that must be met
// exclude: A condition that must not be met
// include: An array of paths or files where the imported files will be transformed by the loader
// loader: A string of “!” separated loaders

module: {
  loaders: [
    {
      // "test" is commonly used to match the file extension
      test: /\.jsx$/,

      // "include" is commonly used to match the directories
      include: [
        path.resolve(__dirname, "app/src"),
        path.resolve(__dirname, "app/test")
      ],

      // "exclude" should be used to exclude exceptions
      // try to prefer "include" when possible

      // the "loader"
      loader: "babel-loader" // or "babel" because webpack adds the '-loader' automatically
    }
  ]
}

Loaders

github.io: webpack loaders.


// Notice the ! syntax separating the loader from the module path.
// When chaining loaders, they are applied right to left (from the file, back): less - css - style.
require("style-loader!css-loader!less-loader!./my-styles.less");

// Loaders can accept query parameters:
require("loader?with=parameter!./file");

Plugins

HardSourceWebpackPlugin

github.com.


plugins: [
  new HardSourceWebpackPlugin()
]

Invalidate cache


rm -rf node_modules/.cache/hard-source