webpack 小记

最新推荐文章于 2023-12-13 09:42:59 发布
最新推荐文章于 2023-12-13 09:42:59 发布
阅读量123 收藏
点赞数
分类专栏： webpack 前端开发 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sparkler123/article/details/89875779
版权

+ module
    rules:[
        Rule
            resource
                test
                exclude
                include
                resoueceQuery
            use
                loader
                options
                    
    ]
        

+ Rule.loader 是 Rule.use: [{ loader }] 的简写
+ Rule.include 是 Rule.resource.include 的简写


+ Rule.loaders 是 Rule.use 的别名
+ UseEntry.query 是 UseEntry.options 的别名

WangminzeSpk
关注
专栏目录
vue2 + webpack5相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在...小记：这只是配置的 package.json 文件，更有配置好的 webpack.config.js 文件，以及整个完整的 vue2+webpack5 整个的项目，因为上传的规定可以找我来拿
vue2 + webpack4相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在...小记：这只是配置的 package.json 文件，更有配置好的 webpack.config.js 文件，以及整个完整的 vue2+webpack4 整个的项目，因为上传的规定可以找我来拿
webpack小记
zhouyuqin01的博客
11-21 86
定义：webpack是一个第三方模块包，用于解析并打包代码。 作用：支持所有类型文件的打包；支持less/sass => css ；支持ES6,7,8 => ES5 ；压缩代码，提高加载速度。 webpack的准备工作： 1：初始化包环境 ，生成package.json文件记录下载的包 yarn init / npm init 2：安装依赖包 yarn add webpack webpack-cli -D D记录在开发环境 3：在package.json自定义打包命令， “s...
前端-webpack 小记
老顽固也可爱
06-05 87
webpack 小记
webpack 小记（4.x）
qq_27314517的博客
06-11 164
load 和plugin区别： loader： 一种作用于webpack不同的打包方案(文件预处理器) plugin： 可以在webpack运行到某一时刻的时候帮你做一些事 十分常用的配置项： url-loader 和 file-loader 的区别 打包静态文件的时候会用到这俩loader（图片，xls等），file-loader只是单纯将文件拿到打包后路径，url-loader还可以配置是否转为base64内联到页面中，以及其他配置，url-loader 功能更强大 postcss-loader： 自动
webpack：webpack小记
m0_49888984的博客
08-17 70
笔记webpack：webpack小记 1.webpack作用 2.webpack.config.js的配置 3.webpack-dev-server webpack-dev-server用来自动打包的插件,文件有改动则自动打包，我们直接刷新网页就行。使用方法： npm install webpack-dev-server -d 在webpack.config.js配置诶入口和出口文件 在package.json中scripts项配置： “dev”：“webpack-dev-server --ope
webpack小记——alias与eslint
weixin_34195364的博客
04-29 3090
在webpack项目之中， 我们会借助alias别名提升代码效率和打包效率。 但是在使用了自定义的路径指向后，eslint就会对应产生找不到模块的报错。 Unable to resolve path to module '@/component' import/no-unresolved 复制代码这个时候，就要使用npm包eslint-import-resolver-alias来解决了 cnpm ...
webpack 理解小记
最新发布
lhove的博客
12-13 752
http-server 搭配 workbox-webpack-plugin。Worker – 开启多进程。
webpack使用小记
andywang821017的博客
04-20 257
前言 webpack是目前前端开发必不可少的一款模块加载器兼构建工具，它能极其方便的处理各种资源的打包和使用， 让前端开发获得与后端开发几乎一致的体验。 webpack特点 webpack 是以 commonJS 的形式来书写脚本的，可以直接使用 require或者import(es6写法，配置babel支持) 的写法来引入各模块 webpack除了支持编译js为...
webpack 4.0 小记
weixin_33889665的博客
06-03 143
介绍 其实之前也会看一些 webpack 脚手架的配置，但是使用的插件实在是太多了，不了解各个插件的左右是一个很大的瓶颈，所以着手认识认识各大插件。 项目地址，之前一直都是用脚手架工具，最近得闲就学习了花裤衩大佬的手摸手系列，自己按着实现一下，顺便记录一下知识点。 项目使用 yarn,之前用主要使用 cnpm，但是总是会有些漏包的问题，所以之后改用了 yarn，个人确实觉得 yarn 在国内来说更...
五、webpack其他问题小记
hbmern的博客
02-14 276
1、压缩CSS后，会使得CSS被压缩成一行，文件大小也会变小 2、JS兼容性问题的处理：babel-loader @babel/core @babel/preset-env a、基本js兼容性处理 -->babel/preset-env 问题：只能转换基本语法，如promise高级语法不能转换 b、全部js兼容性处理-->@babel/polyfill 问题：我只要解决部分兼容性问题，但是将所有的兼容性代码全部引入，体积太大 ...
详解Vue SPA项目优化小记
12-04
概述 之前做了一个React项目和Vue的项目，在做完后不加任何优化的情况下，这2个项目的首屏加载平均时间居然达到了20+s，好一点能进10s，差一点快30s，完全不能忍，优化势在必行，本文章记录下Vue项目的优化过程，...
JS 枚举类型
Sparkler123的博客
03-19 2983
工厂模式： const ALL = 0; /** * 枚举工厂 */ export function enumFactory(arr = []) { const TEMP_ENUM = { ALL: ALL, EXTRA: { [ALL]: { label: '全部', value: ALL }, }, OPTIONS: [{ label:...
使用前端路由 history 模式的前后端配置说明(Vue、Vue-Router、Webpack、tomcat 项目)
Sparkler123的博客
04-03 2961
前端： webpack.prod.config.js 配置：webpack.DefinePlugin配置说明 plugins: [ // ... new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), // ... ] webpack...
前端项目使用 mocker-api 来模拟数据
Sparkler123的博客
12-14 1599
1. 安装依赖：npm i mocker-api -D 2. 在development模式对应的webpack配置下添加： before(app, server) { // console.log('MOCK', process.env) if(process.env.MOCK) { // mocker-api apiMocker(app, path.resolve(__dirname, '../mock')) } } 3. 添加对应的mock数据接口： // moc
VSCode 对 Webpack 配置 resolve alias 的路径智能提示
Sparkler123的博客
02-29 1128
项目根目录下创建：jsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "@hoc/*": ["src/hoc/*"] } }, "exclude": ["node_modules", "dist"] }
antd pro 解析 node_modules 第三方包中的 jsx 和 less
Sparkler123的博客
02-25 1109
在config/plugin.config.js中添加如下代码： config.module .rule('compile') .test(/\.(js|jsx)$/) .include .add(path.join(__dirname, '../node_modules/npm-package-name')) .end() ...
基于 react + react-router + typescript + webpack + babel + esLint 的项目配置
Sparkler123的博客
03-11 948
项目目录： package.json 文件配置： { "name": "webpack-test", "version": "1.0.0", "description": "", "main": "./src/index.js", "scripts": { "dev": "webpack-dev-server --open --watch --config w...
Webpack入门与安装指南
"Webpack学习笔记是一个详细的指南，介绍了webpack的基本概念、安装方法以及配置过程。主要涵盖以下几个知识点： 1. 模块打包工具： Webpack是一个强大的模块打包工具，它支持两种模块导入规范：ESmodule（如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值