![](https://img-blog.csdnimg.cn/20200603174236581.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
文章平均质量分 68
Webpack
猫老板的豆
旁观自己 善待朝夕
展开
-
Webpack 开发快速入门
分析依赖Webpack 需要从入口文件开始,递归地解析和加载项目中的所有模块,分析它们的依赖关系,并构建出一个依赖图(Dependency Graph)。这个过程可能需要花费一些时间,特别是对于大型项目或具有复杂依赖关系的项目。编译代码在构建依赖图的过程中,Webpack 会遇到各种不同类型的文件(如 JavaScript、CSS、图片等)。对于某些文件,Webpack 可能需要使用 loader 进行预处理或转换(如将 ES6 代码转换为 ES5 代码,或将 Sass 代码转换为 CSS 代码)。原创 2024-06-03 11:54:34 · 656 阅读 · 0 评论 -
vue-cli build打包后CSS前缀被自动去除
background: -webkit-linear-gradient(left,#ccc,#fff)background: -moz-linear-gradient(left,#ccc,#fff);background: -o-linear-gradient(left,#ccc,#fff);background: linear-gradient(left,#ccc,@stop);原本是...原创 2018-09-18 15:10:22 · 1199 阅读 · 0 评论 -
WebPack详细入门教程(三)之loader加载器(eg:引入CSS)
WebPack详细入门教程之loader加载器Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scss、less为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件,对React的开发而言,合适的Loaders可以把React的中用到的原创 2017-11-02 17:02:45 · 492 阅读 · 0 评论 -
Webpack详细入门教程(五)之构建本地服务器(eg:自动刷新页面)
Webpack详细入门教程之构建本地服务器实现自动刷新页面想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖 npm install –save-dev webpack-dev-s原创 2017-10-31 18:09:06 · 701 阅读 · 0 评论 -
WebPack详细入门教程(七)之css和sass的处理
webpack引入css 安装依赖 npm install –save-dev css-loader style-loader//main.js中引入.css文件require('../css/index.css'); 或 import '../css/index.css';module.exports = { devtool: 'eval-source-map', en原创 2017-11-03 10:49:24 · 422 阅读 · 0 评论 -
WebPack详细入门教程(六)之图片打包处理
配置文件(webpack.config.js)1. limit = 后面跟的是数字,加上这个参数,图片文件大小(单位为byte)将小于8192byte的图片转成base64编码的形式,减少http请求。2. name 是表示文件被处理之后再目录中的路径和图片生成规则3. 以下三个参数可以自由组合,改变图片被处理有生成的文件名等信息 [name]表示图片文件的文件名 [ext]表示图片文件的扩展名原创 2017-11-02 17:37:44 · 4016 阅读 · 0 评论 -
Webpack详细入门教程(四)之Source Maps调试
生成Source Maps(使调试更容易)开发总是离不开调试,方便的调试能极大的提高开发效率,不过有时候通过打包后的文件,你是不容易找到出错了的地方,对应的你写的代码的位置的,Source Maps就是来帮我们解决这个问题的。通过简单的配置,webpack就可以在打包时为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。在web原创 2017-10-31 17:41:32 · 1863 阅读 · 0 评论 -
Webpack详细入门教程(二)之安装配置
Webpack详细入门教程之安装配置安装 Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack),在终端中转到该文件夹后执行下述指令就可以完成安装。1.全局安装 (npm install -g webpack)2.进入项目目录(F:\webpack)安装(npm install –save-dev webpack)项目目录中会生成一个node_modules文件夹原创 2017-10-31 17:00:52 · 846 阅读 · 0 评论 -
WebPack详细入门教程(一)之简介
WebPack详细入门教程之简介1、什么是WebpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。2、为什要使用WebPack今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简原创 2017-10-31 18:14:36 · 897 阅读 · 0 评论 -
原创超清的 Webpack2 视频教程
原创超清的 Webpack2 视频教程Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的。这个基本就是目前国内最好的 Webpack 2.0 最好的学习视频了,希望可以对新手或者复习相关知识的朋友有用。 Webpack 是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成符合生产环转载 2017-10-30 14:48:44 · 716 阅读 · 0 评论