webpack配置浅析

众所周知，webpack已经相当流行，你或许已经Google了一下webpack是什么鬼，或许已经知道了需要个webpack.config.js文件……,但是具体的配置你已经清楚吗？if(是) {此处就省略一万字。return}.
1、webpack的引子package.json
在webpack.conf.js中引用的组件都是require进来的。如前四行
var path = require(‘path’);
var webpack = require(‘webpack’);
var ExtractTextPlugin = require(“extract-text-webpack-plugin”);
var CopyWebpackPlugin = require(‘copy-webpack-plugin’);
那么web pack，extract-text-webpack-plugin等的原文件都是在哪里存放呢？当然是从node_modules目录下通过名字匹配到对应的模块（path模块除外，path是nodejs内置的模块),但是刚刚clone下来的前端工程却没有这个目录，肿么办？肯定启动报错了。别捉急，很快就能解决了(卖个关子)。解决这个问题很简单，只需要一个命令就ok了，这个命令就是npm install (如果你装nodejs的话已经内置了npm)，通过这个命令可以将package.json中的dependencies 和devDependencies 部分中的第三方模块安装到node_modules目录中，如果没有该目录，nodejs会自动创建。

2、webpack配置导读
path: 记录当前文件的路径
web pack：webpack的功能入口
extract-text-webpack-plugin： 将css文件合并到一个文件中。在咱们的项目中是将多个css文件合并到bundle.css中
module.exports ={} 是commonjs规范对模块化的要求，用来暴露给外部的接口。
devtool ：开发工具， 是用来增强debug的能力。详细的其他的开发工具可以戳这里 http://webpack.github.io/docs/configuration.html
entry : 主js文件入口，咱们这里用的是热加载插件（它可以实现浏览器的无刷新更新） 和 index.js文件
output：filename为 输出文件名称（index.html页面中引用了该文件）， path为输出文件的目录

plugins：
OccurenceOrderPlugin ： webpack为每个模块指定唯一的id，通过该插件，webpack会分析和为模块按优先级排序，为最经常使用的分配一个最小的ID
HotModuleReplacementPlugin ： 配置代码自动编译和热替换插件
CopyWebpackPlugin ： 将from指定的文件copy 到to指定的位置

module部分的loaders
文件加载是webpack一个核心的功能，该功能就是通过各种加载器来实现，下面
我们分析一个比较完整的loader配置，抛砖引玉
test: 匹配文件类型
loader: 加载器
exclude: 排除掉的目录，该目录下的匹配到的文件不适用该加载器加载
query: {
presets: 加载文件需要的参数
},
include: __dirname（node全局对象，当前目录名称）
文件加载器的具体用法可以戳这里 http://webpack.github.io/docs/using-loaders.html

in 文章 | 2016年5月11日 | 113 Words | Comment
Search
Search …
文章归档

2016年五月 (2)
2016年四月 (3)
2016年一月 (2)
2015年十二月 (9)
2015年十一月 (3)
2015年十月 (3)
2015年九月 (7)
2015年八月 (49)
近期文章

[翻译]为什么redux会超过flux？
webpack配置浅析
［repost］State of the Art JavaScript in 2016
React和Redux的连接react-redux
[转载]React.js 2016 最佳实践
DevOps，你真的了解吗？
近期评论

viagra online发表在《也玩图片预览》
Yung Florance发表在《Gulp in action》
Lynwood Lordi发表在《install nginx on ubuntu》
canadian viagra发表在《Curl命令大法》
eangee home design发表在《javascript Promises》
功能

注册
登录
文章RSS
评论RSS
WordPress.org