webpack快速上手教程

webpack是什么，为什么选择它（这部分不感兴趣可以直接跳过）

webpack 最早是德国开发者 Tobias Koppers 开发的一个module bundler,简单点说它就是一个为了模块管理而生的工具。

• 随着web富客户端趋势愈加明显，基于Commonjs和AMD规范的实现和ES6 modules实现的推进，js代码的管理尤为必要，也应运而生了很多模块化工具，如：

  1. 最早也是最有名的RequireJS；
  2. Twitter的Bower；
  3. 能让服务器端的CommonJS格式的模块在浏览器端运行的Browserify和Express框架的作者TJ Holowaychuk开发的Component；
  4. 还有在Component的基础上开发的，语法和配置文件与Component基本通用，并且借鉴了Browserify和Go语言特点的Duo。

• 但是这些实现模块化的方法或多或少都有他们的缺点，如：

  1. 使用<script>标签导入js模块，顺序不好把握且需要梳理可能的冲突和依赖；
  2. 使用Commonjs规范来解决问题，它使我们在服务器端的模块得到了重用，但是在浏览器端，网络的请求都是异步的，无法并行的require多个module。
  3. ES6 modules的实现也只是一小部分，并且想要得到所有浏览器的支持，相比还是需要相当的一段时间。

• webpack拥有哪些优点：

  1. 能替代grunt或者gulp大部分的功能，可以构建打包CSS，预处理CSS，编译JS和打包处理图片等等。
  2. 以 commonJS 的形式书写脚本，对 AMD/CMD 的支持很全面，还支持Angular，ES6等模块化系统，方便旧项目代码迁移。
  3. 扩展性强，插件机制完善，适应多变的需求。
  4. Loaders可以使文件在编译时得到预处理，代码分割，提供按需加载的能力。

webpack怎么安装

1. 下载安装nodeJS，使用node自带包管理器npm。
   在命令行下输入如下命令：npm install webpack -g 就可以将webpack全局安装到本地环境了。

2. 初始化项目并添加webpack依赖到package.json中：

   • 通过npm init实例化package.json文件。
   • 通过npm install webpack --save-dev安装webpack到package.json文件中。
   • 或者通过npm install webpack@1.2.x --save-dev安装指定版本的webpack到package.json文件中。
   • 通过npm install webpack-dev-server --save-dev安装dev tools到package.json文件中，本地运行webpack服务。

webpack怎么配置使用

1. webpack有哪些命令？

   • webpack <entry><output> 配置编译入口文件和输出地址
   • webpack 执行一次开发时的编译
   • webpack -p 执行一次生成环境的压缩编译
   • webpack --watch 在开发时持续监控增量编译（可配置）
   • webpack -d 生成SourceMaps
   • webpack --progress 显示编译进度
   • webpack --colors 显示静态资源的颜色
   • webpack --sort-module-by, --sort-chunks-by, --sort-asset-by 将modules/chunks/assets进行列表排序
   • webpack --display-chunks 展现编译后的分块
   • webpack --display-reasons 显示更多引用模块原因
   • webpack --display-error-details 显示更多报错信息

2. 项目的根目录下必须配置 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置文件，告诉 webpack 去做什么事情，如下例：

   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'
}
}
;

   从上例不难看出，webpack的配置其实主要就是对module.exports中的一些属性进行配置，这些属性包括：

   • entry（页面入口文件配置）
   • output（入口文件输出配置）
   • module（模块加载器配置）
   • watch（持续监控增量配置）
   • resolve（其它解决方案配置）
   • plugins（第三方插件配置，很多插件官方文档介绍不全，可以到github上查找说明文档，如copy-webpack-plugin）
   • devServer(webpack-dev-server代理服务配置)
     对于以上配置可以参考详细的官方文档

【更详细的内容，会后续更新】