Webpack入门

Webpack 是什么

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包。
其主要特性如下：

• 同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS）；
• 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
• 可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载；
• 支持对CSS，图片等资源进行打包，从而无需借助Grunt或Gulp；
• 开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求；
• 对source map有很好的支持。

安装 Webpack

首先得安装Node.js

• 全局环境下安装，在任意目录，输入以下命令

$ npm install webpack -g

• 仅在项目在中安装，切换到项目根目录，输入以下命令

$ npm install webpack --save-dev

• 检查安装成功后，显示如下：

$ webpack -v

配置

每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。

webpack.config.js配置详解
这里给出我自己的配置：

var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
  module.exports = {
     plugins:[commonsPlugin],
     entry: {
         index:'./src/js/startup.js'
     },
    //入口文件输出配置
     output:{
         //path: 打包文件存放的路径
         path:'./js',
         //filename: 打包后的文件名
         filename: '[name].bundle.js'
     },
     // externals: { //排除构建文件外
  // 'react': 'React'
  // },
     module: {
         //加载器配置
         //module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理
        loaders:[
         {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
         {
         //配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式 （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
              test: /\.(png|jpg)$/,
               loader: 'url-loader?limit=8192'
         },
         {
             test: /\.js$/, 
             loader: 'babel-loader', 
             query:{
             presets:['es2015','react']
             }
         },
         {
             test: /\.jsx$/, 
             loader: 'babel-loader!jsx-loader?harmony'
         }
         ]
     },
     resolve: { extensions: ['', '.js', '.jsx'] }
 }

这里对Webpack的打包行为做了配置，主要分为几个部分：

• plugins 是插件项：这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
• entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
• output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键（这里是index）替换
• resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全。比如 Hello.jsx 这样的文件就可以直接用 require(./Hello) 引用
• module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装，”-loader”其实是可以省略不写的，多个loader之间用“!”连接起来。

Webpack还有很多其他的配置，具体可以参照它的配置文档
对应各种不同文件类型的资源, Webpack 有对应的模块 loader。比如 CoffeeScript 用的是 coffee-loader, 其他还有很多。请参考相关文档
在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。

Webpack的加载器支持参数，jsx-loader就可以添加?harmony参数使其支持ES6语法。为了让Webpack识别什么样的资源应该用什么加载器去载入，需要在配置文件进行配置：通过正则表达式对文件名进行匹配。

加载器之间的级联是通过感叹号来连接，例如对于LESS资源，写法为style-loader!css-loader!less-loader。对于小型的图片资源，也可以将其进行统一打包，由url-loader实现，代码中url-loader?limit=8192含义就是对于所有小于8192字节的图片资源也进行打包。这在一定程度上可以替代Css Sprites方案，用于减少对于小图片资源的HTTP请求数量。

执行打包

如果通过npm install -g webpack方式安装webpack的话，可以通过命令行直接执行打包命令，比如：
$ webpack –config webpack.config.js
这样就会读取当前目录下的webpack.config.js作为配置文件执行打包操作

理解文件路径

require(‘lodash’) // 从模块目录查找
require(‘./file’) // 按相对路径查找

CSS 及图片的引用

require(‘./bootstrap.css’);
require(‘./myapp.less’);

var img = document.createElement(‘img’);
img.src = require(‘./glyph.png’);

一个模块需要用它的文件路径来加载，看一下下面的这个结构：

–app
——modules
———–MyModule.js
——main.js (entry point)
——utils.js

打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js

app/main.js

// ES6
import MyModule from ‘./modules/MyModule.js’;

// CommonJS
var MyModule = require(‘./modules/MyModule.js’);

最开始的 ./ 是 “相对当前文件路径”
让我们打开 MyModule.js 然后引入 app/utils：

app/modules/MyModule.js

// ES6 相对路径
import utils from ‘./../utils.js’;

// ES6 绝对路径
import utils from ‘/utils.js’;

// CommonJS 相对路径
var utils = require(‘./../utils.js’);

// CommonJS 绝对路径
var utils = require(‘/utils.js’);

相对路径是相对当前目录。绝对路径是相对入口文件，这个案例中是 main.js。

初步学习React和Webpack中，后续继续完善学习……