webpack 使用总结

什么是 webpack

Webpack 是德国开发者 Tobias Koppers 开发的一个强力的模块打包器。 所谓包(bundle)就是一个 JavaScript 文件，它把一堆资源(assets)合并在一块儿，以便它们能够在同一个文件请求中发回给客户端。 包中能够包含 JavaScript、CSS 样式、HTML 以及不少其它类型的文件。

为何要使用 webpack

• 与 react 一类模块化开发的框架搭配着用比较好。
• 属于配置型的构建工具，容易上手，160 行代码可大体实现 gulp 400 行才能实现的功能。
• webpack 使用内存来对构建内容进行缓存，构建过程会比较快。

webpack 的特色

可以实现多种不一样的前端模块系统
前端页面愈来愈复杂、代码量变大，咱们须要使用一些模块系统来组织代码、把代码分割成不一样的模块来使用。
目前前端模块系统主要分为如下几个标准：

• Script标签形式
• CommonJS
• AMD和一些变种实现
• CMD
• ES6模块

以上方式有各自的优缺点，这里不作赘述。
webpack 做为一个智能解析器，能够处理几乎任何第三方的库，不管他们的模块形式是 commonjs，amd 仍是普通的 js 文件，甚至加载依赖的时候能够动态表达式：

import React, { PropTypes } from 'react' require( 'es6-promise' ).polyfill() require( "./templates/" + name + ".jade" ) var $ = require( 'jQuery' )

分块打包
资源请求是个老生常谈的优化问题，有两个极端的方向来处理资源：

• 将全部文件都打包在一个请求里
• 每一个模块都发起一个请求

webpack 打包前端资源（模块）时可以实现代码分割，按需加载，如在单页面应用里，将每一个 page 的资源单独打包，按页面加载。这种方式被称为 code splitting（具体实现方式查看：https://webpack.github.io/docs/code-splitting.html。

处理全部资源
目前模块系统只能处理 javascript，而咱们还有不少其余静态资源须要处理，好比：

• 预编译的 js 文件（coffeescript 或 jsx 或 es6 -> javascript）
• css 文件 （less -> css -> autoprefixer）
• 图片 （压缩、转 base64）
• 模板 （jade、各类template）
• 等等

配置 webpack 后，这些都很容易处理。

webpack 与 、requirejs 等工具的区别

gulp、grunt 是自动化任务构建工具。
webpack 是模块化解决方案。

gulp 是经过一系列插件将本来复杂繁琐的任务（Task）自动化，并不能将你的 css 等非 js 资源模块化，它与 webpack 之间有必定的功能重合，好比打包、压缩混淆、图片转 base64 等等。但它们的目的跟要解决的问题是不同的。

webpack 本质上是相似 browserify、seajs 、requirejs 的JS模块化的方案。其中 seajs / require 是一种类型，browserify / webpack 是另外一种类型。

seajs / require : 是一种在线”编译” 模块的方案，至关于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一种预编译模块的方案，相比于上面 ，这个方案更加智能。这里以webpack为例。首先，它是预编译的，不须要在浏览器中加载解释器。另外，你在本地直接写JS，无论是 AMD / CMD / ES6 风格的模块化，它都能认识，而且编译成浏览器认识的JS。

webpack 的配置

首先看一个简单的 webpack 配置图。
webpack.config.js:

Webpack的配置主要为了这几个项目：
devtool
devtool 属性能够配置调试代码的方式，有多种调试方式。devtool 通常只在开发时使用，生产环境下应将值设为 false。经常使用的值为如下两个：

• eval
  能够设断点调试，不显示列信息，每一个js模块代码用eval()执行，而且在生成的每一个模块代码尾部加上注释，不会生成.map文件。
• source-map
  能够设断点调试，不显示列信息，生成相应的.Map文件，并在合并后的代码尾部加上注释//# sourceMappingURL=**.js.map ，能够看到模块代码并无被eval()包裹，此种模式并无将调试信息放入D打包后的代码中，保持了打包后代码的简洁性.

其余还有eval-source-map、cheap-source-map、cheap-module-source-map、cheap-module-eval-source-map、hidden-source-map，也能够本身组合，如cheap-module-eval-source-map。

// webpack.config.js module.exports = {    devtool: 'cheap-module-eval-source-map' };

听说cheap-module-eval-source-map绝大多数状况下都会是最好的选择，这也是下版本 webpack 的默认选项。

具体使用参考官网 devtool 部分

entry 和 output
entry 用来定义入口文件，能够是个字符串或数组或者对象。
当 entry 是个字符串的时候：

module.exports = {    entry: './main.js' };

当 entry 是个数组的时候，里面一样包含入口 js 文件，另一个参数能够是用来配置 webpack 提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server 会监控项目中每个文件的变化，实时的进行构建，而且自动刷新页面：

module.exports = {    entry: [      'webpack/hot/only-dev-server' ,      './main.js'    ] };

当 entry 是个对象的时候，咱们能够将不一样的文件构建成不一样的文件，按需使用：

module.exports = {    entry: {      a: './a.js' ,      b: './b.js'    } };

output 用于定义构建后的文件的输出，是个对象。其中包含path和filename：

module.exports = {    output: {      path: './build' ,      filename: 'bundle.js'    } };

若是有多个入口文件分开打包，能够经过[name]来命名打包的输出文件。

module.exports = {    entry: {      a: "./a" ,      b: "./b" ,      c: [ "./c" , "./d" ]    },    output: {      path: path.join(__dirname, "dist" ),      filename: "[name].entry.js"    } };

具体使用参考官网
entry 以及 output 部分

module
module 主要是用来配置加载器（Loaders），包括loaders、preLoaders、postLoaders、noParse。
webpack 自己只能处理 JavaScript 模块，若是要处理其余类型的文件，就须要使用 loader 进行转换，本文第六章将会介绍一些经常使用的 Loaders。

loaders、preLoaders、postLoaders的配置选项包括如下几方面：

• test: 一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
• loader: loader的名称（必须）
• include/exclude: 手动添加必须处理的文件/文件夹，或屏蔽不须要处理的文件/文件夹（可选）
• query: 为loaders提供额外的设置选项（可选）

module.exports = {    module: {      preLoaders: [        {test: /\.js$/, loader: "eslint-loader" , exclude: /node_modules/} //打包前使用eslint检测js      ],      loaders: [        {test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, //处理css文件，把less编译成css        {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } // 处理图片，大小低于8k的文件编译为base64      ]    } };

noParse是 webpack 的一个颇有用的配置项，若是你肯定一个模块中没有其它新的依赖就能够配置这项，webpack 将再也不扫描这个文件中的依赖。

module: {      noParse: [/moment- with -locales/] }

具体使用参考官网 module 部分
官网也收集了经常使用的 Loaders 列表：list-of-loaders

resolve
resolve 用来配置文件路径的指向。能够定义文件跟模块的默认路径及后缀等，节省 webpack 搜索文件的时间、优化引用模块时的体验。经常使用的包括alias、extensions、root、modulesDirectories属性：

• alias：是个对象，把资源路径重定向到另外一个路径，好比require(‘React’)默认引用的是 /node_modules/react.js，咱们能够定义用react.min.js替代

  //webpack.config.js ... resolve: {    alias: {      'someutil' : path.join(__dirname, './src/util/someutil' ),      'react-dom' : path.join(nodeModulesPath, 'react-dom/dist/react-dom.min' )    } } ...

  //app.js //配置resolve.alias前 import react-dom form 'react-dom'  //此时默认载入'/node_modules/react-dom/dist/react-dom.js' import someutil form '../../src/util/someutil' //须要定位该文件相对位置    //配置resolve.alias后 import react-dom form 'react-dom'  //此时载入压缩后的'react-dom.min.js' import someutil form 'someutil' //不须要再写相对位置，由于已在resolve.alias中定义

• extensions：是个数组，定义资源的默认后缀，好比定义后引用a.js、b.json、c.css等资源能够不用写后缀名直接写a、b、c

   

  //webpack.config.js ... resolve: {    extensions: [ '' , '.js' , '.jsx' , '.json' , '.css' ] } ...

  //app.js //配置resolve.extensions前 import a form 'a.js'  import b form 'b.json' import c form 'c.css'    //配置resolve.extensions后 import a form 'a'  import b form 'b' import c form 'c'

• root：是个数组，经过绝对路径的方式来定义查找模块的文件夹。能够是一个数组，主要是用来增长模块的搜寻位置使用的。root 的值必须是绝对路径，使用path.resolve设置。

  //webpack.config.js var path = require( 'path' ); resolve: {    root: [      path.resolve( './app/modules' ),      path.resolve( './vendor/modules' )    ] } //这样设置后，会增长搜索app/modules和vendor/modules下全部node_modules里面的模块。

• modulesDirectories：是个数组，是用来设置搜索的目录名的，默认值:[“web_modules”, “node_modules”]。若是把值设置成[“mydir”], webpack会查询“./mydir”, “../mydir”, “../../mydir”等。

  //webpack.config.js ... resolve: {    modulesDirectories: [ 'node_modules' , './src/component' ] } ...

  //app.js //配置resolve.modulesDirectories前 import a form '../../src/component/a'  import b form '../../src/component/b'    //配置resolve.modulesDirectories后 import a form 'a'  import b form 'b'

具体使用参考官网 resolve 部分

plugins
插件，比 loader 更强大，能使用更多 webpack 的 api。webpack 自己内置了一些经常使用的插件，还能够经过 npm 安装第三方插件。本文第七章将会介绍一些经常使用的插件。

var HtmlWebpackPlugin = require( 'html-webpack-plugin' ); module.exports = {    plugins: {      new webpack.optimize.OccurenceOrderPlugin(), //为组件分配ID      new webpack.HotModuleReplacementPlugin(), //热加载插件      new webpack.optimize.UglifyJsPlugin(), //压缩混淆js      new webpack.NoErrorsPlugin()， //跳过编译时出错的代码并记录      new ExtractTextPlugin( '[name]-[hash:5].min.css' ) //将css单独打包并重命名    } }

具体使用参考官网内置 plugins 列表 list-of-plugins 部分，这里有全部内置插件的详细使用说明。

externals
当咱们想在项目中require一些其余的类库或者API，而又不想让这些类库的源码被构建到运行时文件中。例如 React、jQuery 等文件咱们想使用 CDN 的引用，不想把他们打包进输出文件。就能够经过配置 externals 参数来配置：

module.exports = {    externals: {      jQuery: true    } };

而后在页面里引入< script src="//cdn/jquery.min.js">
这样 jQuery 就不用打包了，直接指向 windows.jQuery 就好
externals 部分

其余

除以上 6 个经常使用配置属性外，webpack 的配置属性还有context、cache、 profile等等，我的以为并不经常使用，各位能够前往官网 configuration 详细查看。

经常使用 Loaders 介绍

babel-loader
babel-loader 用来编译下一代 JavaScript，好比 ES六、React 等，编译 ES六、React 的话还须要安装 babel-preset-es201五、babel-preset-react。

eslint-loader
配合 eslint 用来规范纠错 js，你可能同时还会须要 babel-eslint、eslint-plugin-react。

style-loader、css-loader、less-loader、sass-loader
处理 css、less、sass 文件

postcss-loader
用 postcss 来处理 CSS，最被经常使用的是其 autoprefixer 插件

resolve-url-loader
用来解析 css 里的 url() 声明里的文件的相对路径，使用 css-loader 时通常也必需要同时使用 resolve-url-loader

file-loader
用来处理文件名及路径，好比给文件添加 hash，返回文件相对路径等。

url-loader
与上面的 file-loader 相似，可是当文件小于设定的 limit 时能够处理成 Data Url（base 64）。

raw-loader
把文件内容做为字符串返回。例如var fileContent = require(‘raw!./file.txt’)，这里把./file.txt的内容做为字符串返回。

imports-loader
用于向一个模块的做用域内注入变量。
举个栗子，好比咱们须要使用bootstrap.js，这个文件虽然依赖jQuery但其内部没有require(‘jquery’)，这致使文件内的jQuery对象不可识别，因此模块化调用bootstrap.js时就会报错jQuery is not defined`。使用 imports-loader 的话：

require( 'imports?jQuery=jquery!bootstrap/dist/js/bootstrap' );

imports-loader 会在 bootstrap 的源码前面，注入以下代码:

/* IMPORTS FROM imports-loader */ var jQuery = require( "jquery" );

exports-loader
用于向一个模块中提供导出模块功能。功能与imports-loader相似，但他是在文件的最后添加一行。
举个栗子，好比file.js中没有调用export导出模块，或者没有define定义模块，所以没法模块化调用它。可使用 exports-loader：

require( "exports?file,parse=helpers.parse!./file.js" );

他会在./file.js文件的最后添加以下代码：

/* EXPORTS FROM exports-loader */ exports[ "file" ] = (file); exports[ "parse" ] = (helpers.parse);

expose-loader
这个 loader 是将某个对象暴露成一个全局变量。
举个栗子，好比把jQuery对象暴露成全局变量。这样，那些bootstrap.js之类的文件就都能访问这个变量了。

module: {    loaders: [      { test: require.resolve( "jquery" ), loader: "expose?$!expose?jQuery" },    ] }

react-hot-loader
React 的网页热加载刷新 loader。同时须要配合使用 webpack-dev-server 。

经常使用插件介绍

具体的使用方法请在官网list-of-plugins查询，本文只简单介绍几个经常使用插件。

CommonsChunkPlugin

插件用法比较多，经常使用的是把一些不常常更改的公共组件合并压缩成一个 common 文件。有些类库如utils, bootstrap之类的可能被多个页面共享，最好是能够合并成一个js，而非每一个js单独去引用。这样可以节省一些空间。

彷佛只有在多入口文件时才能把公共文件提取出来，但通常模块化都建议单入口文件，因此我的以为这个插件对我并无什么卵用，有多入口需求的同窗可使用。

extract-text-webpack-plugin

第三方插件，将 CSS 打包成独立文件，而非内联。

HotModuleReplacementPlugin

代码热替换。

HtmlWebpackPlugin

生成 HTML 文件，配合 ExtractTextPlugin 能够加入打包后的 js 和 css。

NoErrorsPlugin

报错但不退出 webpack 进程。

OccurenceOrderPlugin

经过计算模块出现次数来分配模块。经过这个插件webpack能够分析和优先考虑使用最多的模块，并为它们分配最小的ID。这个常常被使用能够较快地得到模块。这使得模块能够预读，建议这样能够减小总文件大小。

ProvidePlugin

定义一个共用的插件入口。

new webpack.ProvidePlugin({    $: "jquery" ,    jQuery: "jquery" })

这样就可直接在文件中使用$，无需再require(‘jQuery’)。

UglifyJsPlugin

js 代码压缩混淆 。

DedupePlugin

检测彻底相同(以及几乎彻底相同)的文件，并把它们从输出中移除。

DefinePlugin

主要用来定义全局的环境变量，以便咱们在本身的程序中引用它。

webpack-visualizer-plugin

一个第三方插件，能够生成一个文件查看项目引用的全部模块的占比。

经常使用优化手段及技巧

区分开发及生产环境
前端开发环境一般分为两种：

• 开发环境： 须要日志输出，sourcemap ，错误报告等等
• 生产环境：须要作代码压缩，对文件名进行 hash 处理等等

为了区分咱们能够建立两个文件分别进行不一样环境下的配置：

• webpack.config.dev.js // 开发环境
• webpack.config.prod.js // 生产环境

同时 webpack 还提供了 DefinePlugin 插件来设置全局环境变量，后面会根据设置的不一样环境变量决定是否打包压缩，仍是启动dev server 或者是 prod server

plugins: [      new webpack.DefinePlugin({          'process.env.NODE_ENV' : JSON.stringify( 'production' ) // or development      }) ]

判断当前环境是不是生产环境

var isProduction = function () {    return process.env.NODE_ENV === 'production' ; }

使用代码热替换
使用代码热替换在开发的时候无需刷新页面便可看到更新，只在开发环境的配置文件使用，具体配置以下。

npm install --save-dev webpack-dev-server webpack-dev-middleware express

把webpack/hot/dev-server加入到 webpack 配置文件的 entry 项:

<!-- webpack.config.dev.js --> entry: [      'webpack-dev-server/client?http://localhost:3000' ,      './src/app.js' ],

把new webpack.HotModuleReplacementPlugin()加入到 webpack 配置文件的 plugins 项:

<!-- server.js --> var webpack = require( 'webpack' ); var WebpackDevServer = require( 'webpack-dev-server' ); var config = require( './webpack.config' );    var compiler = webpack(config); var server = new WebpackDevServer(compiler, {    publicPath: config.output.publicPath,    hot: true ,    historyApiFallback: true ,    stats: {      colors: true ,      hash: false ,      timings: true ,      chunks: false ,      chunkModules: false ,      modules: false    } });    server.listen(3000, 'localhost' , function (err, result) {    if (err) {      return console.log(err);    }    console.log( 'Listening at http://localhost:3000/' ); });

在 package.json 中定义启动监听热加载：

<!-- package.json --> "scripts" : {    "start" : "node server.js" }

如今你能够经过运行npm start启动服务器。

编译 ES六、React
这里主要是借助 Babel 进行编译。
安装依赖：

npm install --save-dev babel-loader babel-core babel-preset-stage-0 babel-preset-es2015 babel-preset-react babel-preset-react-hmre

在项目根目录新建个.babelrc文件：

<!-- .babelrc --> {    "presets" : [ "es2015" , "stage-0" , "react" ] }

配置 webpack 配置文件的 module 项：

<!-- webpack.config.js --> module: {      loaders: [{          test: /\.js$/,          loaders: [ 'react-hot' , 'babel' ], //若生产环境下去掉'react-hot'          include: path.join(__dirname, 'src' )      }}] }

更多请访问 babel-loader、babel-preset-react-hmre

使用 ESLint 检查规范 js 代码
ESLint 是个代码错误与风格检测工具，能够辅助编码规范执行，有效控制代码质量。
ESLint 主要有如下特色：

• 默认规则包含全部 JSLint、JSHint 中存在的规则，易迁移；
• 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；
• 包含代码风格检测的规则（能够丢掉 JSCS 了）；
• 支持插件扩展、自定义规则。

安装依赖：

npm install --save-dev eslint eslint-loader eslint-plugin-react

项目根目录新建.eslintrc文件，用来配置 ESLint 规则，如下为常见规则：

<!-- .eslintrc --> {    "parserOptions" : { //EsLint经过parserOptions，容许指定校验的ecma的版本，及ecma的一些特性      "ecmaVersion" : 6, //指定ECMAScript支持的版本，6为ES6      "sourceType" : "module" , //指定来源的类型，有两种”script”或”module”      "ecmaFeatures" : { // ecmaFeatures指定你想使用哪些额外的语言特性          "jsx" : true //启动JSX      }    },    "parser" : "babel-eslint" , // EsLint默认使用esprima作脚本解析，也能够切换成babel-eslint解析    "env" : { // Environment能够预设好的其余环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等      "browser" : true ,      "node" : true ,      "es6" : true ,      "mocha" : true    },    "plugins" : [ // EsLint容许使用第三方插件      "react"    ],    extends: [ // Extends是EsLint默认推荐的验证你可使用配置选择哪些校验是你所须要的      "eslint:recommended"    ],    rules: [ // 自定义规则      no-empty: [ "error" , { "allowEmptyCatch" : true }],      "strict" : [2, "never" ],      "react/jsx-uses-react" : "error" ,      "react/jsx-uses-vars" : "error" ,      "no-console" : [ "error" , { allow: [ "warn" , "error" , "log" ] }]    ],    "globals" : { // 即插件在执行过程当中用到的其它全局变量    } }

在项目根目录新建.eslintignore 文件告诉 ESLint 去忽略特定的文件和目录：

<!-- .eslintignore --> dist node_modules dependent coverage webpack.*.js *Server.js

在Sublime中安装插件：
SublimeLinter
SublimeLinter-contrib-eslint

更多请访问 eslint、babel-eslint、eslint-plugin-reac、eslint-loader、ESLint 使用入门、Lint Like It’s 2015

压缩代码
使用 webpack 内置的 UglifyJsPlugin 便可：

<!-- webpack.config.js --> plugins: [      new webpack.optimize.UglifyJsPlugin({          compress: {              warnings: false          }      }) ]

Code Spliiting，分割代码，按需加载
对于大型的web 应用而言，把全部的代码放到一个文件的作法效率不好，特别是在加载了一些只有在特定环境下才会使用到的阻塞的代码的时候。Webpack有个功能会把你的代码分离成Chunk，后者能够按需加载。这个功能就是 Code Spliiting
Code Spliting的具体作法就是一个分离点，在分离点中依赖的模块会被打包到一块儿，能够异步加载。一个分离点会产生一个打包文件。

本文这里主要是基于 React 与 React-Router 的 Code Spliiting。开篇说了 webpack 目前已经更新到 2.x 版本， 1.x 与 2.x 的 Code Spliiting 方法略有不一样，这里分开来说。

webpack 1.x 的例子：

<router history= "{history}" >    <route path= "/" getcomponent= "{(location," callback)= "" > {        require.ensure([], function (require) {          callback( null , require( './HomePage.jsx' ));        });      }}    />    <route path= "/about" getcomponent= "{(location," callback)= "" > {        require.ensure([], function (require) {          callback( null , require( './AboutPage.jsx' ));        });      }}    /> </route></route></router>

webpack 2.x 的例子：

class Page extends React.Component {    render() {      <route path= "{this.props.path}" getcomponent= "{(location," callback)= "" > {          System.import( this .props.component)            .then((component) => {              callback( null , component);            });        }    } } </route>

<router history= "{history}" >    <page path= "/about" component= "./AboutPage.jsx" > </page></router>

使用 DllPlugin 和 DllReferencePlugin 分割代码
经过 DllPlugin 和 DllReferencePlugin，webpack 引入了另一种代码分割的方案。咱们能够将经常使用的库文件打包到 dll 包中，而后在 webpack 配置中引用。业务代码的能够像往常同样使用 require 引入依赖模块，好比 require(‘react’), webpack 打包业务代码时会首先查找该模块是否已经包含在 dll 中了，只有 dll 中没有该模块时，webpack 才将其打包到业务 chunk 中。

首先咱们使用 DllPlugin 将经常使用的库打包在一块儿：

var webpack = require( 'webpack' ); module.exports = {    entry: {      vendor: [ 'lodash' , 'react' ],    },    output: {      filename: '[name].[chunkhash].js' ,      path: 'build/' ,    },    plugins: [ new webpack.DllPlugin({      name: '[name]_lib' ,      path: './[name]-manifest.json' ,    })] };

该配置会产生两个文件，模块库文件：vender.[chunkhash].js 和模块映射文件：vender-menifest.json。其中 vender-menifest.json 标明了模块路径和模块 ID（由 webpack 产生）的映射关系，其文件内容以下：

{    "name" : "vendor_lib" ,    "content" : {      "./node_modules/.npminstall/lodash/4.17.2/lodash/lodash.js" : 1,      "./node_modules/.npminstall/webpack/1.13.3/webpack/buildin/module.js" : 2,      "./node_modules/.npminstall/react/15.3.2/react/react.js" : 3,      ...      } }

而后在业务代码的 webpack 配置文件中使用 DllReferencePlugin 插件引用：

var webpack = require( 'webpack' ); module.exports = {    entry: {      app: [ './app' ],    },    output: {      filename: '[name].[chunkhash].js' ,      path: 'build/' ,    },    plugins: [ new webpack.DllReferencePlugin({      context: '.' ,      manifest: require( './vendor-manifest.json' ),    })] };

须要注意的是：dll包的代码是不会执行的，须要在业务代码中经过require显示引入。
编译 less/sass、自动添加浏览器前缀、将 css 单独打包
我用的是 less，因此这里以 less 为例。
安装编译 less 的依赖：

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

安装处理 css 内 url() 声明路径的依赖：

$ npm install resolve-url-loader --save-dev

安装 autoprefixer 依赖：

$ npm install postcss-loader autoprefixer  --save-dev

配置 webpack 配置文件的 module、postcss项：

<!-- webpack.config.js --> module: {      loaders: [{          test: /\.less$/,          loader: 'style' , 'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!resolve-url!postcss!less'          include: path.join(__dirname, 'src' )      }}] }, postcss: [      require( 'autoprefixer' ) ]

生产环境下咱们可能会须要把 css 单独打包出来，这时须要用到 ExtractTextPlugin 插件 ：

npm install extract-text-webpack-plugin --save-dev

var ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); ... plugins: [      new ExtractTextPlugin( '[name]-[hash:5].min.css' ) ], module: {      loaders: [{          test: /\.less$/,          loader: ExtractTextPlugin.extract( 'style' , 'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!resolve-url!postcss!less' )          include: path.join(__dirname, 'src' )      }}] }, postcss: [      require( 'autoprefixer' ) ] ...

压缩图片、将图片转为 base64
图片处理常见的loader有如下三种：

• file-loader: 默认状况下会根据图片生成对应的 MD5 hash 的文件格式
• url-loader: url-loader相似于file-loader，可是url-loader能够根据自定义文件大小或者转化为 base64 格式的 dataUrl，或者单独做为文件，也能够自定义对应的 hash 文件名
• image-webpack-loader: 提供压缩图片的功能

安装依赖：

npm url-loader image-webpack-loader --save-dev

module: {    loaders: [      {        test: /\.(jpe?g|png|gif|svg)$/i,        loaders: [          'url?limit=10000&name=img/[hash:8].[name].[ext]' , // 图片小于8k就转化为 base64, 或者单独做为文件          'image-webpack' // 图片压缩        ]      }    ] }

给文件添加 hash 缓存、自动生成页面
在 output 项给生成文件添加 hash：

output: {      ...      filename: '[chunkhash:8].bundle.js' // chunkhash 默认是16位，可自定义配置      ... }

文件名带上 hash 值后，这个值在每次编译的时候都会发生变化，都须要在 html 文件里手动修改引用的文件名，这种重复工做很琐碎且容易出错，这里咱们可使用 html-webpack-plugin 来帮咱们自动处理这件事情：

// 在 app 目录下建一个 index.tpl.html 做为钩子            <meta charset= "UTF-8" >              <div id= "root" ></div>

// 在 webpack.config.dev.js 和 webpack.config.prod.js 添加配置代码，便可生成相对应的 index.html plugins: [    new HtmlWebpackPlugin({      template: 'app/index.tpl.html' ,      minify: {          removeComments: true ,          collapseWhitespace: true ,          removeRedundantAttributes: true ,          useShortDoctype: true ,          removeEmptyAttributes: true ,          removeStyleLinkTypeAttributes: true ,          keepClosingSlash: true ,          minifyJS: true ,          minifyCSS: true ,          minifyURLs: true ,      },      inject: 'body' ,      filename: 'index.html'    }) ]

使用 Fetch
我我的的项目里 Fetch 已经彻底替代 Ajax 了，使用 Fetch 为了兼容旧浏览器须要使用一些腻子脚本，咱们能够将腻子脚本暴露到全局。这里主要使用前文中提到的import-loader、exports-loader。
安装依赖：

npm install imports-loader exports-loader --save-dev  npm install es6-promise whatwg-fetch --save

配置 webpack 配置文件的 plugins 项：

plugins: [      new webpack.ProvidePlugin({          'Promise' : 'es6-promise' ,          'fetch' : 'imports?this=>global!exports?global.fetch!whatwg-fetch'      }),   ],

这样就能够直接在开发文件中使用 Fetch。

总结

再次说明下本文的 配套 DEMO 请访问 https://github.com/tumars/boilerplate-webpack-react-es6-cssModule 查看。
本文还会继续更新修改，欢迎各位交流指教。