webpack
文章平均质量分 63
主要记录自己平时在学习webpack过程中的一些笔记
小白小白从不日白
这个作者很懒,什么都没留下…
展开
-
webpack优化
缩小文件搜索范围Webpack 启动后会从配置的 Entry 出发,解析出文件中的导入语句,再递归的解析。 在遇到导入语句时 Webpack 会做两件事情:根据导入语句去寻找对应的要导入的文件。例如 require('react') 导入语句对应的文件是 ./node_modules/react/react.js,require('./util') 对应的文件是 ./util.js。 根据找到的要导入文件的后缀,使用配置中的 Loader 去处理文件。例如使用 ES6 开发的 JavaScript原创 2021-07-20 11:03:47 · 76 阅读 · 0 评论 -
webpack处理react、vue
使用React框架接下来我们构建一个React基础环境,在React中我们需要解决的jsx语法问题安装依赖:npm install -D @babel/preset-reactnpm install -S reactnpm install -S react-dom在配置文件中,我们也需要添加jsx语法的解析{ test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式,这里用来匹配js和jsx文件(必须) exclude:原创 2021-07-20 10:21:35 · 204 阅读 · 0 评论 -
使用 webpack-dev-server 搭建开发环境(推荐)
在一定程度上可以减少工作量,提升工作效率不会生成类似于dist的文件夹在修改后也不用再次运行 npm run webpack,而是直接修改后,便可看到相应的效果】前提:在项目的根目录下1.通过npminstall初始化项目,安装相关包2.通过[email protected]安装https://www.webpackjs.com/configuration/dev-server/3.通过npm...原创 2021-07-04 13:57:36 · 455 阅读 · 0 评论 -
使用 url-loader 处理图片(实际工作中推荐)
url-loader可以直接处理css和js里的img,无法直接处理html中的img前提:在项目的根目录下1.通过npminstall命令安装相关包2.通过[email protected]安装3.配置url-loaderlimit:3000--小于3k的图片都会转换为base64格式,大于3k的图片不转换为base64格式4.通过npmrunwebpack打包文件效果图:...原创 2021-07-04 13:42:01 · 870 阅读 · 0 评论 -
使用 file-loader 处理 JS 中的图片
前提:在项目的根目录下1.通过npminstall初始化项目,安装相关包2.通过npmrunwebpack打包项目,则会对应生成相应的文件效果图:源码:index.jsimport './index.css';//引入图片import img from './img/logo.png';console.log(img);//创建 img 元素const imgEl = document.createElement...原创 2021-07-04 13:22:48 · 267 阅读 · 0 评论 -
使用 html-withimg-loader 处理 HTML 中的图片
前提:切换到项目的根目录下1.通过npminstall初始化项目,安装项目所需的相关的包2.通过npmrunwebpack打包项目,在此之前为了防止因图片路径导致一些不必要的问题,我们可以在webpack.config.js文件里module里进行如下设置:3.通过[email protected]安装处理HTML文件中图片的包,安装好后在webpack.config.j...原创 2021-07-03 19:12:57 · 713 阅读 · 1 评论 -
使用 file-loader 处理 CSS 文件中的图片
前提:在项目的根目录下1.首先,通过npminstall初始化项目2.其次,通过npmrunwebpack打包项目,此时会在项目的根目录下生成一个dist文件夹,在dist文件夹里的index.html文件中会自动引入:<linkhref="css/main.css"rel="stylesheet"><scriptsrc="main.js"></script>注意:如果是外部的资源,是...原创 2021-07-03 17:24:33 · 649 阅读 · 1 评论 -
Webpack 的应用(一)--处理 CSS 文件
一、原创 2021-06-15 11:23:59 · 154 阅读 · 2 评论 -
webpack--entry、output、loader和plugins
三、webpack的四个核心概念原创 2021-06-15 10:30:50 · 157 阅读 · 0 评论 -
webpack--常见的构建工具及对比、概述、初体验
一、概述原创 2021-06-14 15:21:47 · 484 阅读 · 0 评论