随笔分类 -  webpack

webpack之html-webpack-plugin的使用
摘要：webpack实际使用过程中有一个常用的插件html webpack plugin。html webpack plugin会帮助我们自动生成一个html页面，并且可以在页面中动态写入页面title和链接的bundle.js文件。 使用的原因 webpack在打包时，会从entry中的入口js文件开始 阅读全文
posted @ 2018-08-26 10:13 异形剑客 阅读(971) 评论(0) 推荐(0)
webpack之React开发环境配置
摘要：React组件在实际的开发过程中会结合webpack使用。配置的过程大致如下： 首先我们创建一个项目文件夹Hello，使用npm init命令生成package.json文件。然后我们确认一下是否安装了webpack和webpack dev server。如果没有安装可以进行全局安装或者安装在本地。 阅读全文
posted @ 2018-08-23 11:14 异形剑客 阅读(625) 评论(0) 推荐(0)
webpack之webpack-dev-server的使用
摘要：本文的目的是要体验下使用webpack服务器的热更新和构建完成自动弹出浏览器的酷炫效果。 1、webpack及webpack dev server的安装 全局安装webpack，使用命令npm install webpack g 全局安装webpack dev server，使用命令npm inst 阅读全文
posted @ 2018-08-09 16:01 异形剑客 阅读(24623) 评论(1) 推荐(0)
webpack源码分析——参数初始化
摘要：webpack比较常见的用法有两种：一、使用配置文件；二、不使用配置文件（用命令 webpack <entry> [<entry>] <output>)。这两种方式参数的初始化方式不太一样： 方式一、从配置文件和shell语句中读取并合并参数；方式二、从shell语句从直接读取入口和出口参数。本文会 阅读全文
posted @ 2018-02-26 15:23 异形剑客 阅读(272) 评论(0) 推荐(1)
webpack源码分析——配置调试环境
摘要：无论是阅读webpack源码，还是编写webpack的plugin和loader,配置调试环境都是很有必要的。weabpack的运行环境是nodejs，调试webpack就是调试nodejs程序。我们平时使用的IDE如eclipse、webstorm都支持nodejs的调试。本文以eclipse（V 阅读全文
posted @ 2018-02-23 17:12 异形剑客 阅读(1952) 评论(0) 推荐(1)
webpack源码分析——tapable
摘要：Webpack的整个流程是通过tapable的事件流机制串联起来。理解tapable对于阅读源代码的作用极大。本文分析的Tapable源码的版本是0.2.7。 一、tapable用途 tapable中大量的API主要是为了实现两个功能，一个作用是通过apply方法在complier中注册插件；另一个 阅读全文
posted @ 2018-02-06 20:57 异形剑客 阅读(492) 评论(0) 推荐(1)
使用ExtractTextPlugin插件抽取样式
摘要：webpack在打包资源的时候，会将资源文件转换成javascript代码，来实现与其他模块的合并。在打包css文件时，用JS代码引入样式的方式，会有一定的延时。这就是我们使用ExtractTextPlugin插件抽取样式的原因之一。下面我们来比较一下这两种方式的差别。（本文中使用的webpack版 阅读全文
posted @ 2018-01-12 15:01 异形剑客 阅读(11520) 评论(0) 推荐(1)