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