WebPack

WebPack 2.0 不支持IE8

Modules

The import and export statements have been standardized in ES2015. Although they are not supported in most browsers yet, webpack does support them out of the box.

Behind the scenes, webpack actually "transpiles" the code so that older browsers can also run it. If you inspect dist/bundle.js, you might be able to see how webpack does this, it's quite ingenious! Besides import and export, webpack supports various other module syntaxes as well, see Module API for more information.

Note that webpack will not alter any code other than import and export statements. If you are using other ES2015 features, make sure to use a transpiler such as Babel or Bublé via webpack's loader system.

Version 2 of webpack supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle this for you. Keep in mind that you will still probably need babel for other ES6+ features.

postcss

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

• cssnano is a modular CSS minifier.
  currently, cssnano is bundled with css-loader, so you don't need to load it yourself. However, you can also use cssnano explicitly with postcss-loader.
• autoprefixer adds vendor prefixes, using data from Can I Use.
• postcss-cssnext allows you to use future CSS features today (includes `autoprefixer ).

Css Loader

Interprets @import and url() like import/require() and will resolve them.

modules The query parameter modules enables the CSS Modules spec.
camelCase By default, the exported JSON keys mirror the class names. If you want to camelize class names (useful in JS), pass the query parameter camelCase to css-loader.

当使用modules模式时，所有的CSS模块的.classname 选择器作用域都变成local, 需要手动在.js文件里设置 css.classname 生效。
需要引其他css文件的样式时， 用 composing 特性。 例：

.pullright{
	composes: middle from './base.css';
	float: right;
}

引用 base.css文件中的 middle classname

Style Loader

Adds CSS to the DOM by injecting a <style> tag

注意： add css 的意思是在html加载的时候，通过js自动生成<style> 添加到DOM中，不是直接修改html文件
用 style-loader build后的js文件中有生成样式相关的方法，否则没有
style-loader/url 需要和 file-loader 配合使用，不能和css-loader使用

Extract Text Plugin

Extract text from a bundle, or bundles, into a separate file.

It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file ( styles.css ). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle.

html webpack plugin

Simplifies creation of HTML files to serve your webpack bundles.

If you have multiple webpack entry points, they will all be included with script tags in the generated HTML.
If you have any CSS assets in webpack's output (for example, CSS extracted with the ExtractTextPlugin) then these will be included with <link> tags in the HTML head.

CommonsChunkPlugin

The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in cache for later use. This results in pagespeed optimizations as the browser can quickly serve the shared code from cache, rather than being forced to load a larger bundle whenever a new page is visited.

Examples:

new webpack.optimize.CommonsChunkPlugin({
  name: "commons",
  // (the commons chunk name)

  filename: "commons.js",
  // (the filename of the commons chunk)

  // minChunks: 3,
  // (Modules must be shared between 3 entries)

  // chunks: ["pageA", "pageB"],
  // (Only use these entries)
})

Explicit vendor chunk: Split your code into vendor and application.

entry: {
  vendor: ["jquery", "other-lib"],
  app: "./entry"
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    // filename: "vendor.js"
    // (Give the chunk a different name)

    minChunks: Infinity,
    // (with more entries, this ensures that no other module goes into the vendor chunk)
  })
]