Webpack is a very popular compilation and packaging tool, it provides an extensible loader way, simple configuration, you can compile and package various types of files, including JS, CSS, image, font, HTML, and a variety of precompiled languages are not a problem.

Review and reflection

In the previous section, Getting Started: 10 Minutes of Automated Building, we explained how to build a workflow using Gulp. We recognize that gulp is a process management tool, which combines a complete set of workflow based on a single task. Moreover, gulp also has many work modules named gulp-* format for processing various resource files. If you haven’t seen the previous section, you are advised to go back and read on. Because the content of this section is closely related to the knowledge of the previous section.

In this section we will look at how to build a project with versioning capability. What is versioning capability? Instead of SVN or Branch, let’s look at a scenario like this to help understand:

You use the workflow you built last time to develop a website and launch it. The second day open found a bug, thought nima hurriedly while the boss did not find repair. Code change, package, release, all in one go, perfect. Then ten minutes later your boss calls you into the office, opens the page and says there’s a bug. A heart, a look! Oh, my God, this is a stupid cache…

How to solve this cache? Or, how can I make sure that I release a new version that will completely replace the old version? This is version management.

There are a number of ways to fix this, including manually stamping things like SRC =”a.jpg?201608062315″, which can be fixed, but if you update too many things at once, you won’t be able to change them.

Can Gulp do that for us? Yes, please. If you are interested, you can search the information by yourself. Is there an easier way? Yes, WebPack naturally supports this feature. Let’s show you how to build such a workflow using WebPack.

Second, the webpack

The use of Webpack, let’s briefly introduce. Like gulp, WebPack needs to write its configuration file before it works.

Install webPack globally

npm install webpack -gCopy the code

Make it a good habit and install it locally

npm install webpack --save-devCopy the code

By the way, we have installed the following several loaders together:

npm install style-loader css-loader sass-loader swig-loader --save-devCopy the code

The *-loader function is similar to that of gulp-*, which is a compilation module.

Next, create a new webpack.config.js configuration file in the root directory.

var path = require('path')

module.exports = {
  entry: {
    Index: ['./src/js/index.js']
  },
  output: {
    path: path.resolve(__dirname, './dist/static'),
    publicPath: 'static/',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.scss', '.swig']
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css'
      },
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      },
      {
        test: /\.swig$/,
        loader: 'swig'
      }
    ]
  }
}Copy the code

Here is roughly divided into four parts: the content of the entry entry file, which is the starting point of all work, you can put the whole web application is packaged into a final js file, then you only need to define an entry, and if you want to multiple pages separated, you need to define multiple entry, eventually js in different page references. A bundle is generated for each entry.

Output defines the configuration for packaging output:

  • Path is the storage path of the packaged files. According to the above configuration, it means that the files we will package will be stored indist/staticUnder;
  • PublicPath is used to define the url prefix of the packaged file