1、最近没事做就学习了一下webpack，因为之前有接触过seajs和requirejs但是他们都没打包和webpack那么强大

　　WebPack的特点

1. 丰富的插件，方便进行开发工作
2. 大量的加载器，包括加载各种静态资源
3. 代码分割，提供按需加载的能力
4. 发布工具

那我们直接进入正题：

　　因为webpack是基于nodejs的，所以本地要安装下nodejs  npm 安装那两个我就不多说啦，网上教程一大堆。

　　WebPack的安装

1. 安装命令

   $ npm install webpack -g

2. 使用webpack

   $ npm init  # 会自动生成一个package.json文件$ npm install webpack --save-dev #将webpack增加到package.json文件中

　　3、然后新建目录

　　　　根目录下，新建一个webpack.config.js文件 就像gulp gulpfile.js一样的意思、

　　　　新建一个index.css文件  一个index.js文件 然后安装所需的模块。。。比如css-loader style-loader、、、、

　　　　webpack.config.js文件的内容

　　　　var webpack = require(‘webpack‘);

　　　　var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘);　　module.exports = {    　　//插件项   　　 plugins: [commonsPlugin],   　　 //页面入口文件配置   　　 entry: {     　　   index : ‘./src/js/page/index.js‘   　　 },   　　 //入口文件输出配置    　　output: {     　　   path: ‘dist/js/page‘,      　　  filename: ‘[name].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/flux-example/src‘, //绝对路径        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],        alias: {            AppStore : ‘js/stores/AppStores.js‘,            ActionType : ‘js/actions/ActionType.js‘,            AppAction : ‘js/actions/AppAction.js‘        }    }};
index.js文件　　
 require(‘./index.css‘)
弄完这些之后一定要 用命令行执行 webpack

webpack学习记录