All notes


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


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.


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: [

  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 dev server.

# webpack.config.js

var path = require("path");
module.exports = {
  entry: {
    app: [
  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.


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.



module 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 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.

// Loaders can accept query parameters:



plugins: [
  new HardSourceWebpackPlugin()

Invalidate cache

rm -rf node_modules/.cache/hard-source