webpack
文章平均质量分 88
liangklfang
https://github.com/liangklfangl
展开
-
dora源码分析及插件书写
建议在github上阅读1.调用dora(config)后背后的逻辑(1)合并默认的config和用户自定义的config,其中默认的config如下:const defaultCwd = process.cwd();const defaultArgs = { port: '8000', cwd: defaultCwd, enabledMiddlewareServeIndex: tru原创 2017-01-13 13:22:53 · 3519 阅读 · 0 评论 -
彻底弄懂prepack与webpack的关系
最新内容,请在github阅读。同时,All issue and start welcomed!1.prepack vs webpack的说明今天facebook开源了一个prepack,当时就很好奇。它到底和webpack之间的关系是什么?于是各种google,最后还是去官网上看了下各种例子。例子都很好理解,但是对于其和webpack的关系还是有点迷糊。最后找到了一个好用的插件,即prepack-原创 2017-05-04 16:49:11 · 23367 阅读 · 0 评论 -
有了它们就能更好的理解webpack了
最新内容,请在github阅读。同时,All issue and star welcomed!1.获取webpack配置的输出配置 compilation.outputOptions其中该对象有如下内容: { path: 'builds', filename: 'bundle.js', publicPath: 'builds/', chunkFilename: '[id原创 2017-05-04 17:09:35 · 6239 阅读 · 0 评论 -
webpack-dev-server原理分析与HMR实现
建议在github阅读,我会保证内容及时更新,并欢迎star,issue。webpack-dev-server在我们的entry中添加的hot模块内容看看下面的方法你就知道了,在hot模式下,我们的entry最后都会被添加两个文件:module.exports = function addDevServerEntrypoints(webpackOptions, devServerOptions) {原创 2017-03-02 17:31:50 · 18528 阅读 · 3 评论 -
React动画之react-transition-group使用
代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步写在开头的话这其实是对react-transition-group文档的翻译。但是在其中夹杂了很多自己的理解,如有不对的地方,还请issue。运行命令如下:npm install webpackcc -gnpm installnpm run css1.CSS动画之CSSTransitionGroupC原创 2017-06-05 11:39:10 · 25082 阅读 · 0 评论 -
React+Babel+Webpack初学者全家桶完整实例Demo
写在前面的话自已以前对redux,react,rect-redux,react-router都是有一点的了解,并且在真实的项目中也多少有些涉及。但是不足的地方在于没有做一个demo将他们串起来,所以总是感觉似懂非懂。特别是react服务端渲染这一块,对于自己完全就是一个黑箱,这对我深入理解react同构等稍微难一点的内容产生了很大的影响。所以我最后写了这个例子,希望有同样困扰的同学能够有所收获。也欢原创 2017-06-04 14:09:37 · 6359 阅读 · 0 评论 -
atool-build脚手架分析与webpack打包原理详解
最近要做一个js解析markdown的项目,所以当然想到了ant design,不过ant design内部又使用了atool-build脚手架,所以决定好好研究一下。如果有不对的地方还烦请指正。不过个人建议阅读github版本,因为最近也在不断的学习这部分内容,可能会随时修改,所以可能存在没有及时同步的问题。1.atool-build的简单说明该脚手架只是对webpack进行了简单的封装。首先,w原创 2017-01-13 15:55:37 · 8175 阅读 · 0 评论 -
使用React的static方法实现同构以及同构的常见问题
代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步原创 2017-06-03 17:02:22 · 10329 阅读 · 0 评论 -
React技术栈进阶之路之设计模式篇
1.Redux导致的组件多余的渲染问题请仔细阅读React 组件间通讯的文章的最后一个例子,最后的输出结果为:这是因为在最后一个定时器中是如下的代码: setTimeout(() => { store.dispatch({ type: 'child_2_1', data: 'bye' }) }, 2000);此时你必须了解redux原创 2017-07-01 09:22:14 · 5894 阅读 · 1 评论 -
react+redux+webpack+babel+npm+shell+git文章合集
react+redux+webpack+babel+npm+shell+git这方面的内容我会随时更新,更新内容放在react全家桶文章实例与react全家桶实例中。如果你有问题欢迎issue,同时如果你觉得有用,请记得start,谢谢1.项目目的我会将我在react+redux+webpack+babel+npm+shell+git学习中遇到的各种问题,以及解决问题过程中写的各种文章列举出来。re原创 2017-08-12 09:29:05 · 1507 阅读 · 0 评论 -
Babel插件源码分析与babel.transform和babylon.parse操作AST实现效果
因本人也初学这部分内容,很多深入的内容并没有深入,以后遇到会及时补充到github上,因此本人也建议在github上阅读,同时欢迎star,issuebabel-plugin-add-module-export的pluginmodule.exports = ({types}) => ({ visitor: { Program: {从几个babel插件的源码来看看如何写babel插件原创 2017-04-20 16:38:19 · 9506 阅读 · 1 评论 -
webpack的commonchunkplugin深度解析以及chunk和module内部结构
因为最近自己也在不断研究这方面的内容,建议在github阅读1.不添加commonchunkplugin打包的文件我们的webpack配置如下: var webpack = require('webpack');module.exports = { entry: { main:'./src/index.js', main1:'./src/index1.j原创 2017-02-15 21:51:33 · 20369 阅读 · 2 评论 -
bisheng脚手架源码分析和插件机制
我都不知道为什么要仔细分析这背后的逻辑,可能是因为bisheng.js在ant design中出色的表现吧,而最近自己也在做一个类似的项目。建议阅读github版本,我会及时更新github上面的版本1.npm start背后的逻辑1.1 源码分析部分执行bisheng start执行的就是下面的代码逻辑exports.start = function start(program) { cons原创 2017-01-14 21:05:23 · 6960 阅读 · 1 评论 -
webpack打包-模块分布解析
webpack打包-模块分布解析 发布于 1 个月前 作者 yongningfu 385 次浏览 来自 分享 webpack打包原理解析一开始,对webpack打包原理很不熟悉,看了不少资料,但是讲的都不是很清楚,现在来梳理一遍。所有资源统一入口这个是什么意思呢?就是webpack是通过js来获取和操作其他文件资源的,比如webpack想处理less, 但是它并不会直接从本地的文件夹中转载 2017-02-08 08:51:07 · 3396 阅读 · 0 评论 -
webpack中moduleId和chunkId
建议在github阅读1.webpack打包策略分析1.1 单入口文件通过下面的打包结果,并结合下面说的多入口文件打包问题,应该是不难理解的。/************************************************************************//******/ ([/* 0 *//***/ function(module, exports, __w原创 2017-02-08 14:37:44 · 3795 阅读 · 0 评论 -
commonChunkplugin配置项详解
建议在github阅读单入口文件时候不能把引用多次的模块打印到commonChunkPlugin中注意:example1(对应于目录example1,修改webpack.config.js中的配置就可以了,以下例子相同)var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");module.exports原创 2017-02-08 19:23:06 · 17102 阅读 · 0 评论 -
webpack-dev-server简单使用
1.webpack-dev-server配置1.1 ContentBasewebpack-dev-server会使用当前的路径作为请求的资源路径,但是你可以通过指定content base来修改这个默认行为:$ webpack-dev-server --content-base build/这样webpack-dev-server就会使用build目录下的文件来处理网络请求。他会监听资源文件,当他们原创 2017-02-09 09:56:02 · 59088 阅读 · 0 评论 -
webpack中的externals vs libraryTarget vs library
建议在github阅读,并欢迎提出问题讨论1.webpack中的externals vs libraryTarget vs library我们的目的只有一个,那就是编译script标签上的模块来使用。下面的例子有两个条件:1.我们的模块依赖于jQuery,但是我们不希望jQuery打包到最后的文件中去2.我们的模块要存在于全局的变量Foo上面webpack配置如下:module.exports =原创 2017-02-10 15:25:47 · 5641 阅读 · 0 评论 -
webpack的code spitting以及chunkfilename详解
建议在github阅读,我会及时更新最新内容1.webpack打包时候添加参数–display-modules这时候,我们在控制台中输出的 “+ 1 hidden modules”都会显示出来–watch监控文件的变化并自动编译。–display-chunks显示一个chunk中包含的模块。2.使用require.default来手动获取导出对象当我们使用require的时候,如果你想要获取默认导出原创 2017-02-13 14:31:02 · 6711 阅读 · 0 评论 -
webpack之DllPlugin和DllReferencePlugin使用的demo
建议在github阅读,文中内容会及时更新1. webpack.DllPlugin "scripts": { "clean": "rimraf dist",//rimraf , oppsite of node-mkdirp "build:dll": "webpack --config webpack.dll.js", "watch": "npm run build:dll &原创 2017-02-22 19:48:52 · 6764 阅读 · 1 评论 -
webpack中学习到的拓扑排序
在html-webpack-plugin中看到可以通过拓扑排序的方式来对不同的chunks进行处理,所以把代码记录下来:'use strict';var toposort = require('toposort');var _ = require('lodash');/* Sorts dependencies between chunks by their "parents" attrib原创 2017-02-23 21:28:35 · 1114 阅读 · 0 评论 -
集成webpack-dev-server,watch的打包工具使用
该工具目前也在开发完善阶段,建议在github阅读并获取最新开发状态,并欢迎issue,start1.该工具的三种打包模式首先必须说明一下,该工具是基于webpack2的,所以很多配置都是需要遵守webpack2规范的。如果需要安装,直接运行下面的命令就可以了。npm install -g webpackcc//同时必须注意,我们局部安装的优先级要高于全局安装的1.1 webpack-dev-ser原创 2017-03-03 15:48:39 · 4538 阅读 · 0 评论 -
Webpack系列专栏文章发布上线了
关于Webpack的专栏文章已经整理成册了,欢迎在gitchat预定。本课程包含从 Webpack 的基本概念和使用一直深入到核心的内容,如 Loader 和 Plugin 的书写,以及 Compiler 和 Compilation 对象分析。同时也涵盖了 HMR 的实现原理及 Tree-shaking,按需加载等高级知识点。通过本课程,将深入的了解和使用 Webpack,并能够按照项目需求快速开发原创 2017-11-13 09:20:35 · 1276 阅读 · 0 评论