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
生成SourceMapswebpack --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代理服务配置)
对于以上配置可以参考详细的官方文档
【更详细的内容,会后续更新】