webpack
文章平均质量分 90
各类学习
clearNew
这个作者很懒,什么都没留下…
展开
-
webpack v4+升级v5+ 踩坑笔记
工作中遇到了一个小问题,然后搞了两天,怀疑是webpack的问题,因此升级了现有项目的webpack,webpack v4+ 升级到了 v5, node v12+ 升级到了 node v16+, 本来打算升v17的, 发现和16版本改动不小, 和开发其他项目还得切回了, 索性就降到了v16,因此node升级到v17,要慎重啊!!!.........原创 2022-07-07 23:26:59 · 1670 阅读 · 1 评论 -
webpack 环境变量 区分环境
webpack.DefinePlugin有时我们需要根据运行的是开发环境还是生产环境对变量进行定义,那么我们就可以使用webpack自带的插件 webpack.DefinePlugin;来创建一个全局变量例如: // index.js let url; if(DEV === 'dev') { url = 'http://localhost:3000' }else { url = 'https://www.baidu.com/' } console.log(typeof FLAG)原创 2020-07-22 22:42:25 · 563 阅读 · 0 评论 -
webpack 本地开发时的跨域及react中跨域
跨域由于浏览器的安全机制,规定了同源策略,即只允许同源下的接口交互。同源即协议、域名、端口号相同。那么要想访问其他域下的接口就涉及到了跨域。js中跨域有一下几种方法CORS 跨域nginx服务器代理jsonp那么在webpack中是如何配置跨域的呢?一、同域但端口号不同下使用 devServer.proxy// webpack.config.jsdevServer: { proxy:{ '/api':{ // 重写路径可以整理 指定的访问路径 target: 'http:原创 2020-06-30 22:01:21 · 696 阅读 · 0 评论 -
webpack 常用小插件
cleanWebpackPlugin清除webpack生成的文件,默认删除output中路径的文件。一般我们都会在输出文件的名称中加上哈希,但是这样就导致了,每次打包后还存留之前打包的文件,因此我们就需要这个插件清除之前生成的文件,只保留最新的打包文件安装npm install clean-webpack-plugin -D // 引入 const { CleanWebpackPlugin } = require (' clean-webpack-plugin ') ; // 使用 modu原创 2020-06-10 22:05:06 · 171 阅读 · 0 评论 -
webpack ---devtool / watch
devtoolwebpack devtoolwebpack 的配置项: 此选项控制是否生成,以及如何生成 source map。原创 2020-06-08 21:44:28 · 233 阅读 · 0 评论 -
webpack 中对 图片处理
webpack中图片的处理web开发中肯定会用到图片,那么webpack中对图片的处理也需要相应的loader;一般文件中引入图片有三种方式:js文件中通过 import imgSrc from './photo'; img.src = imgSrc引入在css文件中作为背景图引入在html文件中直接引入 <img src='./photo' />先说css情况,图片做为背景图引用时,打包css的loader中就会带有处理图片;html中的文件需要使用html-loadernp原创 2020-06-01 22:27:00 · 488 阅读 · 0 评论 -
webpack ---js处理和css处理
js处理原创 2020-05-27 22:31:37 · 184 阅读 · 0 评论 -
webpack ---webpack-dev-server及html-webpack-plugin
webpackwebpack就是静态模块打包器,将应用程序所需的一个多个模块打包成一个或多个bundle。webpack 的四个核心部分:入口(entry)、输出(output)、loader、插件(plugins)。另外还有 mode 模式: 表示打包的是dev环境还是production生产环境。安装:js cnpm i webpack webpack-cli -D; 使用淘宝镜像安装在开发环境中, 安装 webpack 及 webpack-cli; webpack 的运行需要依赖 webpac原创 2020-05-25 21:13:32 · 331 阅读 · 0 评论