01月13, 2016

再看webpack

回过头来看webpack,已经很好的发展成一个平台化的工具了,赶超了类似工具Browserify,github 1w+ star,这也证明了它的优势

简单的概括下,webpack就是一个模块加载器,在它的眼里一切皆模块, 可以很方便的加载各种资源,资源可以通过各种loader使用相关扩展语言,最终打包到一个模块里

这里有个很好的说明 https://github.com/petehunt/webpack-howto 可以让你有个直观的了解

借此也用webpack简单的写了个前端项目,接触下来感觉处理特定场景还可以,对于一套整体的解决方案,

仍需其他工具配合(gulp等),而且官方的文档也写的很一般,不能简单直白的看出某些功能的用途。

下面步入正题,假设我们有如下目录

开发模式下我们在src下模块化书写,及时看效果,部署时编译出一份打包好的资源文件。

webpack提供了一个开发服务器webpack-dev-server帮助我们启动本地项目

安装 npm install webpack-dev-server --save-dev

这里的资源我都是本地安装通过npm执行的,如 package.json

"scripts": {
    "dev": "BUILD_DEV=1 webpack-dev-server --inline --hot --content-base src/",
    "pro": "webpack-dev-server --content-base build/",
    "build": "webpack"
}

npm run dev 启动开发时服务

webpack-dev-server可以监听资源变化,自动刷新,分为俩种模式

iframe模式 访问如下地址即可 http://localhost:8080/webpack-dev-server/

inline模式 命令行指定参数 --inline 访问如下地址即可 http://localhost:8080/

除了自动刷新它还有模块热更新,也就是不刷新页面更新变动,命令行通过添加 --hot 即可

webpack-dev-server默认会serve当前目录,但可以通过 --content-base src/ 指定服务目录

启动后可以看到输出很多资源信息,这里webpack-dev-server会根据 webpack.config.js 配置文件以及源文件

进行编译,把最终的资源输出保存在内存中,页面中访问的资源都是内存中的。

主要的配置都在 webpack.config.js 中,这里简要说下,剩下的大家看下底部的源码就好了

首先配置入口entry,用 fs.readdirSync 去读取,省去手工配置

配置CommonsChunkPlugin插件抽取js中公共的部分到common.js中

里面根据传入变量判断各环境需要的配置

开发环境css直接内联,部署环境通过ExtractTextPlugin插件抽出独立css文件

最后通过HtmlWebpackPlugin插件在html中插入打包后的静态资源,

由于插件不处理之前html内的静态资源,所以先加载了html,然后处理掉之前的资源再把内容传给HtmlWebpackPlugin插件做输出。

最后有兴趣的可以观看源码。

https://github.com/ygm125/webpack-demo

本文链接:https://gmiam.com/post/zai-kan-webpack.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。