前言

说起WebPack的发展历程，不由想起了一那句“千里马常有，而伯乐不成有的”的名言，相信很多人都听说过Grunt, Gulp 这样的架构工具，但是却很少有人涉及应用过Webpack, 但是由于React的技术框架的风靡一时，webpack的地位以及应用度得到了很大的提升，这不得不感谢Facebook的架构。

对此，我也谈一下webpack在React项目中的应用实践，究竟为何要用这样一个技术架构。

什么是webpack

首先，webpack是一款前端的架构工具，也是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 或者import(XXX)的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass）, webpack拥有很多的模块加载器（loader）来处理这些问题。

官网是 http://webpack.github.io/

webpack的优势何在

webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
支持多种文件资源，比如js, coffee等等。
配置简单，开发便捷，比如打包、压缩混淆、图片转base64等。
扩展性强，插件机制完善，特别是支持 React 热加载插件（ react-hot-loader ）

安装

我们常规直接使用 npm 的形式来安装：

$ npm install webpack -g

常规项目还是把依赖写入 package.json 包去更人性化：

$ npm init
$ npm install webpack --save-dev

配置

每个webpack的工程都会有一个配置文件，就比如grunt中的gruntfile.js, gulp中的gulpfile.js。

webpack中的文件名字叫做webpack.config.js, 这个文件需要在项目根目录创建，默认的执行指令为‘webpack’。

简单配置：

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loaders: ['style-loader', 'css-loader']
        }]
    }
};

这里解释一下几个属性的作用：

entry:用户配置整个项目工程文件的入口点。
output：用于配置解析编译后生成压缩文件路径。
module: 主要定义项目中的解析器例如css, jsx， babel等等，这个很想gulp,grunt的task，这里比较好的一点是我们不需要require这些loader，但是需要额外安装的。而gulp是需要的。

可以配置多个entry:

var path = require('path');

var config = {
  entry: {
    admin: './admin/index.js',
    consumer: './consumer/index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: '[name].bundle.js'
  }
};

module.exports = config;

上面代码中的path, __dirname为webpack特有的方法属性用于指定路径。

常用loader的分析

对于webpack来讲，可贵之处在于提供了大量可用的loader处理我们的资源文件，Loader 是支持链式执行的，如处理 sass 文件的 loader，可以由 sass-loader、css-loader、style-loader 组成，由 compiler 对其由右向左执行，第一个 Loader 将会拿到需处理的原内容，上一个 Loader 处理后的结果回传给下一个接着处理，最后的 Loader 将处理后的结果以 String 或 Buffer 的形式返回给 compiler。

如下常用几项：

预处理器

css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理

loaders之 js处理

babel-loader
jsx-loader

loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: 'style!css'} ]

image-loader

loader安装：

sudo install image-webpack-loader --save-dev

config代码：

module: {
    loaders: [
        {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                        'file?hash=sha512&digest=hex&name=img/[hash].[ext]',
                        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
        }
    ]
},

url-loader

sudo npm install url-loader --save-dev

url-loader的功能和image-loader功能比较类似，只是url-loader可以k控制小于某个大小的图片转成dataurl。

plugin的应用

webpack的plugin可以帮助开发者处理压缩混淆等代码上的问题，使用也是相当方便，具体我们看一下代码：

plugins: [
        //单独生成html文件
        new HtmlWebpackPlugin({
            filename: '../index.html',//生成的html及存放路径，相对于path
            template: './src/index.html',//载入文件及路径
            publicPath: "js/",//这是build文件下html文件引用js文件的路径
            chunks: ['index'],//需要引入的chunk，不配置就会引入所有页面的资源
        }),
        // 使用browser-sync实时刷新页面
        new BrowserSyncPlugin({
          host: 'localhost',
          port: 3000,
          server: { baseDir: ['./build/'] }//会默认访问./build/index.html
        }),
        //负责压缩JS代码，并控制是否要显示警告
        new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
      ]

这里主要说明一下一下几个个插件：

new webpack.optimize.DedupePlugin()

主要查找相等或近似的模块，避免在最终生成的文件中出现重复的模块，比如可以用它去除依赖中重复的插件。

new webpack.optimize.OccurenceOrderPlugin()

这个插件为组件和模块分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID，通过分析ID，可以建议降低总文件的大小。

new webpack.HotModuleReplacementPlugin()

全局开启代码热替换,

new ExtractTextPlugin("styles.css")

默认情况下，css是被打包到js中的如果接受不了，我们可以应用这个plugin将css style提取出来。

webpack-dev-server使用

webpack-dev-server比较好用的地方在于热替换，更改后不需要重新刷新浏览器，配置上相比其他工具容易的多。简称（HMR）.

sudo npm install webpack-dev-server --save-dev

我们只要在启动时候指定 –hot指令即可，例如：

webpack-dev-server --progress --colors --hot --inline -d

可以直接复制使用哦，打开url, 尝试修改代码，看看能否自动刷新！

运行指令分析

webpack的运行相对简单：

webpack -watch 提供watch方法，实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps，方便调试
webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile 输出性能数据，可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

通常情况下我们也会用npm包管理器进行封装，以便于使用，例如：

"scripts": {
    "start": "./node_modules/.bin/webpack -d --progress --colors --watch",
    "build/":"./node_modules/.bin/webpack  -p"
  }

总结

总体上来讲，webpack并不是一个新的工具，之前使用范围也不是很广泛，但是自由其过人之处，很多loader还有待继续完善，相信之后的版本会给大家一个不错的惊喜。

WebPack在React项目架构中的应用实践

前言