Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

1.安装 Webback

首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js.

用 npm 安装 Webpack：

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev

Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。

# 查看 webpack 版本信息
$ npm info webpack
# 安装指定版本的 webpack
$ npm install webpack@1.12.x --save-dev

如果需要使用 Webpack 开发工具，要单独安装：

$ npm install webpack-dev-server --save-dev

2.使用Webpack

在终端中使用npm init命令可以自动创建这个package.json文件

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包

  // 安装Webpack
  npm install --save-dev webpack

通过配置文件来使用webpack

var Clean = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');

module.exports = {  
  //页面入口文件配置,entry属性可以是一个对象，而对象名也就是key会作为下面output的filename属性的[name]。当然entry也可以是一个数组
  entry: {    
        yujian:'./src/yujian.js'  
},  
  //入口文件输出配置
  output: {    
        path: './bundle',    
        filename: '[name].min.js',    
        publicaPath: './'  
},  
  module: {    
        //加载器配置
        loaders: [      
           {        
                 test: /\.css$/,        
                 loader: 'style!css'      
           },      
           {        
                 test: /\.scss$/,        
                 loader: ExtractTextPlugin.extract( 'style-loader', "css!sass")                         
           },      
          {        
                 test: /\.png$/,        
                 loader: "url-loader?mimetype=image/png,limit=1"                         
           },      
          {        
                 test: /\.(ttf|eot|svg|woff|woff2)$/,        
                 loader: "file-loader"                         
           },     
           {        
                 test:/jquery.min\.js$/,        
                 loader:"expose?$!expose?jQuery"      
           },     
           {        
                 test: /\.html$/,
                 loader: "underscore-template-loader",        
                 query: {          
                        engine: 'lodash'        
                }      
           }    
      ]  
},  
      //插件项,这里的commons.js需要在html上去加载，并且是必须要最先加载
      plugins: [    
             new Clean(['dist']),    
             new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),    
             new ExtractTextPlugin("[name].css") 
 ],  
      //其它解决方案配置
      resolve:{      
             alias:{jqury:"jquery/dist/jquery.min.js"}  
},  
     amd:{
             jQuery:true
     }
}

(1)plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
(2) entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里），其语法大致为：

 {
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"]
    },
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js"
    }
}

该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。

(3)module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理：

module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }

如上，"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。

(4)最后是 resolve 配置，这块很好理解，直接写注释了：

resolve: {
        //查找module的话从这里开始查找
        root: 'E:/github/flux-example/src', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }

关于 webpack.config.js 更详尽的配置可以参考这里

我们第一步就是先要安装好各个必须的loader，我们直接看看需要通过npm安装什么

//clean-webpack-plugin
//extract-text-webpack-plugin
//node-sass
//jquery
//bootstrap

#   npm install --save-dev name
$ npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev

独立出CSS样式

如果我们希望样式通过 link 引入，而不是放在 style 标签内呢，即使这样做会多一个请求。这个时候我们就要配合插件一起使用啦.

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

安装完插件就要配置webpack.config.js了。我们添加以下代码

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    // ...省略各种代码
    module: {
        loaders: [
            {test: /\.js$/, loader: "babel"},
            {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
            {test: /\.(jpgpngsvg)$/, loader: "url?limit=8192"},
            {test: /\.scss$/, loader: "style!css!sass"}
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        new ExtractTextPlugin("[name].css")
    ]
}

为了区分开用<link>链接和用 style ，我们这里以CSS后缀结尾的模块用插件。我们重点关注一下使用了ExtractTextPlugin的模块，在ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader

当然，插件也支持所有独立样式打包成一个css文件。增加多一个参数即可

new ExtractTextPlugin("style.css", {allChunks: true})

Mou icon

原载出处:
http://webpackdoc.com/install.html
http://www.w2bc.com/Article/50764