Distal webpack workflow (two) - Webpack basic use

Author: Jogis
description link: https://github.com/yesvods/Blog/issues/3
reprint please indicate the original author information and links

The previous article describes webpack and installation methods, this will introduce webpack usage in a single-page application (Single Page Application) with multi-page site on different occasions.

Input and output

Similar with other module loader, webpack also need to configure an entry file, such as a entry.js
There are several configurations, to introduce the following file write directly to the entry in the configuration file webpack.config.js:

module.exports = {
  entry: {
    "entry":"./entry.js"
  },
  output: {
    path: "build",
    filename: "bundle.js"
  }
}

The command line

> webpack

Be conveniently, WebPACK detection profile, and the output reading module inlet path and file name of the file into one file dependency output to build / bundle.js

By introducing simple HTML

<script src="./build/bundle.js"></script>

It can run in a browser.

Loader

Simple SPA program is loaded, including: JS compiled and loaded, CSS compilation and loading, image loading and compression, JS and CSS compression.

Webpack provides a loader mechanism, such as: css-loader, style-loader, url-loader and the like, for loading into different resources js file, e.g. url-loader for loading png / jpg format in js image files, css / style loader for loading css files, less-loader is used to compile less files into css.

Here are some common loader (described in detail here):

style + css + less loaded Bootstrap less version:

require('style!css!less!./bower_components/bootstrap/bootstrap.less');

style + css load general style file:

require('style!css!./styles/main.css');

url Load picture resource file:

require('url!./images/logo.png');

json loader to load json format:

require('json!./data.json');

js suffix file without using the loader

require('./scripts/main.js');

coffee script loaded

require('coffee!./scripts/main.coffee');

Like the early adopters of children's shoes by Babel loader experience ES6 / 7 features:

require('babel!./scripts/es6.js');

Note that, to avoid a loader loaded with the babel all node_module module, there will be unexpected results, but also a large number of case load, the load time is very long. babel can also be used as reactjs jsx file loaded using a detailed look.

Configuration loader

Just introduced a way to load resources within the line, if there are a lot of pictures or css resources need to be loaded, rewritable loader clumsy, webpack provide another way to load resources.
Adding configuration profiles:

module.exports = {
  module: {
    loaders: [
      {test: /\.css$/, loader: "style!css"},
      {test: /\.(png|jpg)$/, loader: "url-loader?limit=8192"}
    ]
  }
}

Where the test is a regular expression, using the appropriate loader file name matching
/.css$/ matches xx.css files, but does not apply to xx.sass or xx.css.zip file
/.css/ addition to matching xx.css can also match xx.css.zip

Can be added after the loader? Xx = yy pass parameters to indicate the add xx to yy (with http address Query like)

It should be noted that the need to use before using the loader

> npm i --save xxx-loader

A respective loader installed, and by the dependent configuration to package.json --save, a load does not require the introduction required.

Search path variable

Loader described above, it is easy to integrate everyday use webpack resources, if deemed webpack only can do this, then let your disappointment.

It can be seen loading resources over time, use a relative path to describe the path for those ./app/src/scripts/main.js configuration file by modifying webpack, add the default search path, even more elegant.

// webpack.config.js
var path = require("path")
module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "./app/src/scripts")
    }
  }
}

After changing the configuration file is loaded:

require("js/main.js");

The default search path configuration

For bower_components diehard, front-end development and ultimately, a few bower plug-in, gulp use can be dynamically loaded into the bower.json dependencies specified HTML file by gulp-wiredep.
There is also a very convenient method of introduction in webpack:
First, add the configuration

module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "src/scripts"),
      src: path.join(__dirname, "src/scripts"),
      styles: path.join(__dirname, "src/styles"),
      img: path.join(__dirname, "src/img")
    },
    root: [
      path.join(__dirname, "bower_components")
    ]
  },
  plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
      )
  ]
}

Add resolve.root represents the default search path, use the following syntax:

require("jquery");

webpack will be carried out under bower_components / jquery directory to find CommandJS module node_module / index.js, index.js
However, because Bower does not belong to the category CommandJS specifications, using bower.json main attribute specifies the project file entry
point, everyone will know plugins inside the string of stuff is doing it

After that, we can easily referenced in any js file inside jquery:

var jQuery = $ = require("jquery");

It should be noted, require not jquery.js, but the files in the directory folder name bower_components

Multi-page development

webpack not just for the development of SPA, for multi-page site, webpack well supported, by changing the configuration file for multiple entry:

module.exports = {
  entry: {
    "entry":"./src/scripts/entry.js",
    "swiperEffect":"./src/scripts/swiperEffect.js"
  },
  output: {
    path: "build"
    filename: "[name].bundle.js"
  }
}

output setting inside, [name] representing each entry of a key, so running webpack time, outputs corresponding to two files:

build/entry.bundle.js
build/swiperEffect.bundle.js

They can then were cited in two pages index.html and about.html friends

File Separation

A front-end engineering is to reduce http requests, which expressed the need for multiple js merged into one, however, file a single js too much effect on the speed of the browser loads the file, because the browser is now up to six concurrent http requests, you can use this feature , will be re-loaded with a separate third-party repository.

Use CommandJS specification

//entry.js
require.ensure(["jquery", "imgScroll"], function(require){
  var $ = require("jquery");
  require("imgScroll");
  $("#container").scroll({
    XXX
  })
})

By require.ensure file declaration, called demand loading dependence, which will depend independent of a document entry module to be finished loading, loading successive time you will need to request

Again compiled webpack:

build/entry.bundle.js
build/swiperEffect.bundle.js
build/2.2.bundle.js

2.2.bundle.js which is jquery + imgScroll asynchronous loading the contents of
a picture is worth a thousand words:

2.2.bundle.js can be seen in entry.bundle.js load after load asynchronously.

webpack practical command

In addition to simply run webpack, you can also add several parameters, easy to deploy document processing.

Js file output, after uglify compression:

> webpack -p

Automatically monitor changes in dynamic compilation run webpack:

> webpack --watch

Usually Dev stage, using --watch with the live-server can switch automation development tedious window and press Enter.

Above only describes the basic usage webpack front-end development, more parameters and functional use, reference the official website