webpack
harmsworth2016
这个作者很懒,什么都没留下…
展开
-
webpack之babel安装、配置和使用
前言环境babel配置打包添加es7草案阶段的提案stage-2总结参考前言现代浏览器对于es6语法有了很大支持,但是仍有部分es6/7的语法不支持,且浏览器的早期版本也不支持es6。此时,就需要把es6/7的代码编译成es5风格,以便更好的向下兼容。而babel就是一个javascript编译器,可以立刻使用最新语法,无需等待浏览器支持。环境...原创 2018-08-26 21:14:40 · 2755 阅读 · 0 评论 -
webpack4入门操作
简介安装零配置创建src/index.js打包参考简介webpack4运用了大量的es6语法,这些es6语法在nodejs v8.9.4及以上版本中能够得到原生的支持。webpack4使用零配置,即无需配置文件就可以将资源打包到默认路径。webpack4中cli工具分离为webpack核心库和webpack-cli命令行工具两个模块。安装确保nod...原创 2018-08-17 13:58:34 · 403 阅读 · 0 评论 -
webpack之file-loader和url-loader的区别
前言区别配置打包总结前言webpack加载css背景图片、img元素指向的网络图片、使用es6的import引入的图片时,需要使用url-loader。区别url-loader可以将图片转为base64字符串,能更快的加载图片,一旦图片过大,就需要使用file-loader的加载本地图片,故url-loader可以设置图片超过多少字节时,使用file-...原创 2018-08-25 21:31:57 · 9909 阅读 · 0 评论 -
webpack之自动编译的三种方式
前言自动编译方式观察模式web服务器webpack中间件总结前言每次编译代码时,需要手动输入yarn run build,挺麻烦的,有没有自动编译的方式呢?还真有,如下三种:自动编译方式webpack’s Watch Mode 观察模式webpack-dev-server web服务器webpack-dev-middleware ...原创 2018-08-26 01:02:05 · 6110 阅读 · 0 评论 -
webpack4.x实现热更新
热更新前言环境目录未启动热更新效果代码启用热更新效果代码前言webpack 的 webapck-dev-server 包会启动一个开发服务器,当修改入口文件或者入口文件中引入的其他文件时,webpack 会自动编译入口文件,然后刷新整个页面。然我们仅仅修改了一个文件就刷新了整个页面,这样的操作太不划算了,此时可以用到 webpack-dev-server 的热更新功能。环境初始化yarn...原创 2019-05-01 19:07:22 · 2808 阅读 · 3 评论 -
webpack3的新特性
webpack3前言目录结构webapck3新特性Scope HoistingMagic Comments总结前言webpack4都发布一年多了,为啥还要写webpack3的博客呢?因为只有更了解 webpack3 有哪些新功能,才能知道 webpack4 在 webpack3 的基础上又哪些优化。目录结构.├── dist│ └── bundle.js├── package.j...原创 2019-05-03 13:55:13 · 514 阅读 · 0 评论