webpack快速上手教程

webpack快速上手教程

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

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

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

最早也是最有名的RequireJS；

Twitter的Bower；

能让服务器端的CommonJS格式的模块在浏览器端运行的Browserify和Express框架的作者TJ Holowaychuk开发的Component；

还有在Component的基础上开发的，语法和配置文件与Component基本通用，并且借鉴了Browserify和Go语言特点的Duo。

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

使用

<script>

标签导入js模块，顺序不好把握且需要梳理可能的冲突和依赖；

使用Commonjs规范来解决问题，它使我们在服务器端的模块得到了重用，但是在浏览器端，网络的请求都是异步的，无法并行的require多个module。

ES6 modules的实现也只是一小部分，并且想要得到所有浏览器的支持，相比还是需要相当的一段时间。

webpack拥有哪些优点：

能替代grunt或者gulp大部分的功能，可以构建打包CSS，预处理CSS，编译JS和打包处理图片等等。

以 commonJS 的形式书写脚本，对 AMD/CMD 的支持很全面，还支持Angular，ES6等模块化系统，方便旧项目代码迁移。

扩展性强，插件机制完善，适应多变的需求。

Loaders可以使文件在编译时得到预处理，代码分割，提供按需加载的能力。

webpack怎么安装

下载安装nodeJS，使用node自带包管理器npm。

在命令行下输入如下命令：

npm install webpack -g

就可以将webpack全局安装到本地环境了。

初始化项目并添加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怎么配置使用

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

显示更多报错信息

项目的根目录下必须配置 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代理服务配置)

对于以上配置可以参考详细的官方文档

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