It seems of all the examples I've seen, Webpack was designed for JS apps where there's one html file. What about static sites using JS frameworks (jQuery, Bootstrap, etc.) where there are many directory levels? Is it possible for Webpack to process html through many subdirectories and inject bundled JS and CSS like below and keep the directory structure in the ./dist/ folder?

Hopefully there's a method that won't require modifying the config every time a new subdirectory is created.

./css/
./js/
./index.html
./about/index.html
./contact/index.html
./sales/index.html
./product/widgetA/index.html
./product/widgetB/index.html
./product/widgetC/index.html

Any chance of creating one for webpack2?

@AriaFallah This is a really concise and neat tutorial. Please also make tutorials on other technologies like npm, graph-ql, etc.

Now to my question. are esLint and webpack similar. Like coca-cola and Pepsi?

BREAKING CHANGE:

It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style'.

Aside from that, this tutorial is wonderful. Thank you!

Hi.

While I was translated to Korean this tutorials I found small wrong description in part 1:

1. The OccurenceOrderPlugin is just reordering. It's not reduces to total file size.
2. OrderOccurencePlugin is wrong word, OccurenceOrderPlugin is correct.

Thanks.

What's the difference between all the different source maps?

For example: cheap-eval-source-map vs source-map

In development mode of example6 part1 , there is some code about port configuration.

// webpack.config.dev.js
 entry: [
        'webpack-dev-server/client?http://localhost:8082',
        'webpack/hot/dev-server',
        './src/index'
    ],

However, it doesn't work if I modify the port, for example, 8082, while the old port still works.

Seriously. I've been working with Webpack for over a year, putting stuff together from bits over there, bits over here. After reading this tutorial I finally feel like its all coming together. This is a tutorial like all tutorials should be: focus on being simple, tackle one problem at a time; basic building blocks that add up, step by step, to making you feel like a developer wearing a jetpack!

Thank you 😄

PS: feel free to close this issue whenever.

Using loaders: "raw-loader'' is breaking when your run webpack-dev-server --config webpack.config.dev.js

Thanks for a great tutorial.

I noticed that my htmlWebpackPlugin.files are no longer getting injected properly after implementing your suggestions. Is this because the raw-loader is including the options when copying the file over? Is there a way to get it to work?

It's not the end of the world if you can't advise me on this, as I'm glad just to have index.html automatically refreshing at all - but after following your instructions my index.html is refreshing the entire page, instead of just reloading the section of html I edited. I was wondering if you can point out what I've done wrong. Again, no worries if you don't have a solution, but any help would be much appreciated...

// webpack.config.js
/* eslint-disable global-require */
const path = require('path');
const chalk = require('chalk');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FontelloPlugin = require('fontello-webpack-plugin');
const webpack = require('webpack');

const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';

if (PRODUCTION) {
  console.log(chalk.red('Now entering production.'));
} else {
  console.log(chalk.red('Now entering development.'));
}

const plugins = PRODUCTION
  ? [ // Plugins used only in production.
    new ExtractTextPlugin('styles.css'),
  ]
  : [ // Plugins used only in development.

  ];

// These are plugins used in both production and development.
plugins.push(
  new FontelloPlugin({
    config: require('./fontello.config.json'),
  }),
  new HTMLWebpackPlugin({
    template: path.join(__dirname, 'dev', 'index.html'),
    minify: {
      collapseWhitespace: true,
    },
  }),
  new webpack.DefinePlugin({
    DEVELOPMENT: JSON.stringify(DEVELOPMENT),
    PRODUCTION: JSON.stringify(PRODUCTION),
  })
);

const cssProd = ExtractTextPlugin.extract({
  use: [
    {
      loader: 'css-loader',
      options: {
        import: false,
        importLoaders: 1,
        minimize: false,
        sourceMap: true,
        url: false,
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
      },
    },
  ],
});

const cssDev = [
  {
    loader: 'style-loader',
    options: {
      sourceMap: true,
    },
  },
  {
    loader: 'css-loader',
    options: {
      import: false,
      importLoaders: 1,
      minimize: false,
      sourceMap: true,
      url: false,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: 'inline',
    },
  },
];

module.exports = {
  entry: './dev/js/index.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  devtool: PRODUCTION ? 'source-map' : 'inline-source-map',
  plugins,
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'dev', 'js'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', { modules: false }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: PRODUCTION ? cssProd : cssDev,
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 40000,
            },
          },
          'image-webpack-loader',
        ],
      },
      {
        test: /\.html$/,
        use: 'raw-loader',
      },
    ],
  },
};

// index.js
if (DEVELOPMENT) {
  require('../index.html');
}

I would suggest using a bseline webpack file, then for prod and dev require this baseline config and use lodash.merge to deep merge each specific configuration on top :)
Keep DRY

entry: { // 'webpack/hot/dev-server', added with --inline --hot
    index: ['webpack-dev-server/client?http://localhost:8080', './src/index/index.js'],
    biz: ['webpack-dev-server/client?http://localhost:8080', './src/biz/biz.js'],
    home: ['webpack-dev-server/client?http://localhost:8080', './src/home/home.js']
  },

This is what I tried and it didn't work as expected. What did I do wrong ?

Great tutorial! Just wanted to let you know, when I attempted to execute the "npm run build" step, I received this error:

package.json must be actual JSON, not just JavaScript.

Removing the unnecessary comments from the package.json file was enough to fix it.

Thanks,
Joey

Hi,

I've written a bit on the topic too. See Webpack Compared, Developing with Webpack, Webpack and React, and Building Kanban. Maybe you can integrate some of the ideas to your awesome guide.

Dude, When will we have part 3 and 4?
Thank you.

I have seen there are now 2017 and including -minimal and -latest presets available.
The minimal uses feature detection to only transpile for features not supported for the Node.js version being used!

Also, what about plugins for advanced features such as (legacy) decorators and async/await?

Good job! Looking forward to more tutorials and general tutorial improvements!
How about code coverage!?

Awesome tutorial, super useful.

In part 1, example 4 on loaders, I believe you need to change

npm install --save-dev css-loader

to

npm install --save-dev css-loader style-loader

otherwise I get the error

Module not found: Error: Cannot resolve module 'style'