webpack的菜鸟起步

原理 ，好处什么的百度都有在这里就不概述了。

直接点：

   安装 npm install webpack -g    max的需要加sudo

这里我们需要把依赖写入package.json 只要执行：

npm install

npm install webpack --save-dev

下面是重头戏了：

配置文件

在我们的项目中都要配置一个webpack.config.js。用过gulp的都知道什么作用，就是告诉webpack他需要做什么

   var webpack = require("webpack");

  var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
module.exports = {
//插件项
plugins : [commonsPlugin],
//页面的入口文件的配置
entry : {
index : "./src/page/app.js"
},
//入口文件输出配置
output : {
path : "dist/js/page",
filename : "con.js"
},
module : {
//加载器配置
loaders : [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其他解决方案的配置
resolve : {
root : "E:/github/fulx-example/src",
extensions : ["","./js",".json",".scss"],
alias : {
AppStore : "js/stores/.js",
ActionType : "js/actions/.js",
AppAction : "js/actions/AppACtion.js"
}
}
}

1  其中plugins是插件项，这里使用的是ComminsChunkPlugin的插件，他用于提取多个入口文件的公共脚本部分，然后生成一个comon.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文件夹下面。

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 来看看如何使用。

拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：

npm install url-loader -save-dev

配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）

详细的看http://www.cnblogs.com/vajoy/p/4650467.html

Webpack的配置：

  entry   js入口文件

  output   生成文件

  module  进行字符串的处理

  resolve  文件路劲的制定

 plugins   插件比loader更加强大能使用更多的webpack的api

loaders :

   处理样式  ，转成css 如less-loader  sass-loader

  图片处理     如url-loader ，file-loader。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中

处理js   将es6或者更高级的代码转成es5 的代码 如babel-loader,babel-preset-es2015,babel-preset-reast

将js 模块暴露到全局   如expose-loader

常用Plugins介绍

• 　　代码热替换, HotModuleReplacementPlugin

• 　　生成html文件，HtmlWebpackPlugin

• 　　将css成生文件，而非内联，ExtractTextPlugin

• 　　报错但不退出webpack进程，NoErrorsPlugin

• 　　代码丑化，UglifyJsPlugin，开发过程中不建议打开

• 　　多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin

• 　　清理文件夹，Clean

• 　　调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

 

详解看http://www.cnblogs.com/yumeiqiang/p/5281170.html