![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
我的小英短
Q版前端开发攻城狮
展开
-
webpack静态资源管理加载及输出管理
webpack指南梳理学习 - 静态资源管理加载及输出管理导读在webpack中,静态资源管理加载和输出管理是非常重要的一个功能,在模块化开发中起到了很重要的作用,我们通过加载打包css、图片、字体、数据文件等来了解webpack对资源的管理安装依赖cnpm install --save-dev style-loader css-loader # 加载csscnpm install -...原创 2019-06-12 14:38:33 · 1849 阅读 · 0 评论 -
进阶版 webpack 开发脚手架之线上分离、样式脚本公共提取分离、代码压缩
进阶阶段 webpack 开发线上分离、样式脚本公共提取分离、代码压缩导读在上章节呢,我们基本完成了我们的vue开发环境的构建,这节内容,我们继续深化改造这个脚手架工具;让这个脚手架支持更多的特性,让我们开发和构建打包,更加的方便快捷;hao ~ 我们现在来缕一下,我们今天要开发的内容:(温馨提示:看这章节之前呢,一定要看上一章节:https://blog.csdn.net/WU522948...原创 2019-08-20 20:32:25 · 788 阅读 · 0 评论 -
新手级使用webpack4.x构建vue的开发环境
起步阶段 使用webpack4.x构建vue的开发环境导读首先呢,我们在这章节呢,我将手把手带着大家使用webpack4.x搭建一个vue的开发环境,这里有的同学可能就会问了?“有现成的类似于vue-cli的webpack脚手架工具,为什么我们还要自己在造轮子呢?” 在这里呢,我将对这个问题做出回答: 同样是前端开发,看着别人拿着高薪,你心动吗? 开发或打包过程中遇到问题,需要修改脚...原创 2019-08-19 12:19:36 · 983 阅读 · 0 评论 -
手把手带你深入了解 webpack config devSever 常用参数配置
导读DevServer 提供了一些配置项可以改变 DevServer 的默认行为。 要配置 DevServer ,除了在配置文件里通过 devServer 传入参数外,还可以通过命令行参数传入。 注意只有在通过 DevServer 去启动 Webpack 时配置文件里 devServer 才会生效,因为这些参数所对应的功能都是 DevServer 提供的,Webpack 本身并不认识 devSe...原创 2019-07-29 17:47:23 · 2086 阅读 · 0 评论 -
webpack loader从入门到精通全解析
webpack loader从入门到精通Loader 就像是一个转换器,可以把源文件经过转化后输出新的一个结果,并且一个文件还可以链式的经过多个转换器转换。以转换处理 SCSS 文件为例子:SCSS 源代码会先移交给 sass-loader 把 SCSS 转换成 CSS;把 sass-loader 输出的 CSS 交给css-loader 处理,找出 CSS 中依赖的资源、压缩 CSS...原创 2019-07-19 10:39:51 · 1880 阅读 · 0 评论 -
使用webpack打包编译TypeScript包括静态资源引入声明配置
使用webpack打包编译TypeScript导读TypeScript 是 JavaScript 的超集,为其增加了类型声明验证,可以编译为 JavaScript 代码。这篇博文里我们将会学习如何集成 webpack 跟 TypeScript。项目地址:https://github.com/RiversCoder/webpack-test安装ts开发依赖cnpm install --D...原创 2019-07-05 10:55:00 · 5190 阅读 · 0 评论 -
前端知识每日小拷问 005 资源、bug管理相关
前端知识小拷问005 资源、bug管理相关准备接收大前端形法的考验吧!?每日5题,直击你的内心 ~~今天的前端知识点有如下:如果不想让别人盗用你的图片,访问你的服务器资源该怎么处理?面对精灵图和base64如何选择?webpack怎么引入第三方的库?git如何管理线上的bug?nginx有哪些好用的功能?仓库地址:https://github.com/RiversCoder/...原创 2019-07-14 13:50:23 · 909 阅读 · 0 评论 -
前端知识每日小拷问 004 前端工程化相关
前端知识小拷问 004今天的前端知识点有如下:如何进行cdn托管,图片整合?如何利用webpack把代码上传服务器以及转码测试?项目上线流程是怎样的?工程化怎么管理的?如何编写一个元素拖拽的插件?仓库地址:https://github.com/RiversCoder/fontend-question-ten-everyday如何进行cdn托管,图片整合?cdn托...原创 2019-07-09 17:07:54 · 860 阅读 · 0 评论 -
使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境
使用gulp+browserify+browserify+babelify-css+babelify构建轻量级react开发环境导读在react项目开发脚手架选型中,一般大多数情况都会选择create-react-app这款流行的脚手架工具,但是针对一些比较小的项目,个人建议还是动手搭建建一个小型且轻量的构建工具自用比较合适,下面我们使用gulp,配合browserify,搭建react...原创 2019-07-03 16:13:43 · 1705 阅读 · 0 评论 -
webpack 创建个人的第三方依赖library
webpack 创建个人的第三方依赖 library导读除了打包应用程序代码,webpack 还可以用于打包 JavaScript library,所以我们可以使用webpack很方便的打包我们的library项目项目地址:https://github.com/RiversCoder/webpack-test项目目录 |- webpack.config.js |- package...原创 2019-06-27 16:16:56 · 1538 阅读 · 0 评论 -
webpack 引用打包第三方全局依赖3种方式
webpack 引用打包第三方全局依赖导读webpack 可以识别 ES6 模块语法、CommonJS 或 AMD 规范编写的模块。然而,一些第三方的库(library)可能会引用一些全局依赖(例如 jQuery 中的 $)项目地址:https://github.com/RiversCoder/webpack-test项目目录 |- webpack.config.js |- pa...原创 2019-07-02 21:04:15 · 8310 阅读 · 0 评论 -
webpack 引入の公共模块代码分离及懒加载
webpack 公共引入模块代码分离及懒加载导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test基本的代码分离案例在src目录下编辑index.js如下:import _ from 'lodash' // index.js中引入了lodashimpor...原创 2019-06-18 15:48:42 · 1379 阅读 · 0 评论 -
webpack开发生产环境配置
webpack 生产/线上环境构建导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test配置文件安装webpack-mergecnpm install --save-dev webpack-merge在项目主目录中新建如下几个js文件:D:\me\...原创 2019-06-17 14:14:16 · 1185 阅读 · 0 评论 -
webpack安装和基本构建
webpack指南梳理学习 - 安装和基本构建导读webpack是前端开发过程中使用超多,用户量超广的一款前端开发打包编译工具,用起来让你欲罢不能,爱不释手。作为目前最火的打包工具,它又是如何使用工作的呢?接下来,我们来通过官网的指南学习梳理webpack的基础知识,掌握webpack的常用功能知识点webpack安装前提在学习之前,我相信你们已经基本掌握前端的相关基础知识点,而且本地电...原创 2019-06-11 10:57:26 · 754 阅读 · 0 评论 -
webpack 缓存问题处理解决与性能优化方案
webpack 缓存问题处理解决方案导读在该篇博文中,我们将逐步实现文件hash后缀的输出,修改某个文件,才会对应输出修改该文件的hash后缀,同时满足性能优化,客服端服务端代码同步更新项目地址:https://github.com/RiversCoder/webpack-test官网介绍在之前的指南案例中,我们使用 webpack 来打包我们的模块化后的应用程序,webpack 会生...原创 2019-06-20 17:04:18 · 2594 阅读 · 0 评论 -
webpack热更新案例实现
webpack热更新案例操作导读模块热替换(Hot Module Replacement 或 HMR), 也叫热更新,它是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行浏览器刷新或者命令行重启。注意:热更新 HMR只能在开发环境使用,不适用于生产环境使用webpack.config.js启用 HMR启用该功能实际上相当简单。而我们要做的,就是更新 we...原创 2019-06-14 14:50:57 · 2221 阅读 · 0 评论 -
webpack常用开发工具模块介绍
webpack常用开发工具模块介绍导读在webpack的构建过程中我们需要用到一些基本构建开发工具来提升我们的工作效率,这些工具有哪些呢?source map 自动追踪代码错误所在的文件webpack watch 观察者模式自动编译webpack-dev-server 指定目录启动本地服务webpack-dev-middleware 传递文件给服务器source map 自动追...原创 2019-06-13 17:54:42 · 955 阅读 · 0 评论 -
vue脚手架开发之 babel、postcss配置、多页面打包
进阶阶段 babel、postcss、多页面打包导读在上一章节中,我们学习了开发环境和线上环境的区分,css、js代码分离优化,代码压缩等骚操作;我们这节内容呢,继续打造我们的脚手架工具,Let’s go ~这节内容主要涉及下面这些知识点:css之postcss工程化babel7.x配置根据入口文件,自动生成多页面打包配置postcss问:这是啥?什么鬼?我考,没听试过呀,一...原创 2019-08-21 16:35:54 · 1691 阅读 · 0 评论