1. webpack

react 的项目用 webpack 还不错，目前非react 项目还是以gulp＋webpack 来搞，webpack仅被用来是代替 browerify 来做JS的模块化

1.1. 安装

npm install --save-dev webpack@beta

1.2. 插件

webpack 常用插件

1.2.1. UglifyJsPlugin

解析/压缩/美化所有的js chunk

new webpack.optimize.UglifyJsPlugin([options])

1.2.2. ExtractTextPlugin

该插件会提取entry chunk中所有的 require('*.css')，分离出独立的css文件。

var ExtractTextPlugin = require("extract-text-webpack-plugin");
new ExtractTextPlugin([id: string], filename: string, [options])

1.2.3. DedupePlugin

找出并删除重复的依赖

new webpack.optimize.DedupePlugin()

1.2.4. NoErrorsPlugin

跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。

new webpack.NoErrorsPlugin()

1.2.5. ProvidePlugin

定义标识符，当遇到指定标识符的时候，自动加载模块。

new webpack.ProvidePlugin(definitions)

1.2.6. CommonsChunkPlugin

提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。

new webpack.optimize.CommonsChunkPlugin(options)

1.2.7. DefinePlugin

变量替换

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production'),
  __SERVER__: false
})

1.3. 使用

1.3.1. CSS

Code Splitting - CSS

css-loader + extract-text-webpack-plugin 把CSS单独输出到文件

css-loader 遍历 CSS 文件，然后找到 url() 表达式然后处理他们,css-loader?modules这个参数来开启CSS Modules
style-loader 把原来的 CSS 代码插入页面中的一个 style 标签中
extract-text-webpack-plugin 把CSS输出为单独的文件，而不是直接嵌入HTML里面

npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev extract-text-webpack-plugin@beta

1.3.2. 依赖的模块

Code Splitting - Libraries

var webpack = require('webpack');
module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[chunkhash].[name].js',
            path: './dist'
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest'] // Specify the common bundle's name.
            })
        ]
    }
};

利用 CommonsChunkPlugin 插件把 moment 模块输出为 vendor.js，还有 manifest.js

1.3.3. webpack-merge

合并配置

GitHub

1.3.4. 配置

参考 Configuration

entry

入口

output

输出

filename: 输出的文件名。开发环境用 [name].js;生产环境用 [name].[chunkhash].js
publicPath: html 中 url路径

devtool

module

模块

loaders

加载器

rules

规则

test 必须遵守的规则, 正则表达式
include 必须遵守的规则, string or array
exclude 例外的, string or array
query == options == use url带的 query 参数
query.limit 限制文件大小，单件 byte

resolve

更改模块的解析方式,配置应用层的模块（要被打包的模块）解析

resolve.alias 添加别名(添加相对路径的根目录)
resolve.extensions require 或 import 的时候扫描的文件后缀，默认 extensions: [".js", ".json"]
resolve.modules 第三方依赖库存储的目录，默认 modules: ["node_modules"]

resolveLoader

更改模块的解析方式,配置 loader 模块的解析,

默认:

{
    modulesDirectories: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"],
    packageMains: ["webpackLoader", "webLoader", "loader", "main"]
}

webpack