webpack proxy工作原理
摘要:webpack proxy即webpack提供的代理服务; 基本行为就是接收客户端发送的请求后转发给其他服务器其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制)想要实现代理首先需要一个中间服务器,webpack中提供服务器的工具为webpack-dev-server webpack
阅读全文
posted @
2021-09-02 10:36
半夏微澜ぺ
阅读(750)
推荐(0) 编辑
webpack封装插件实现骨架屏
摘要:在页面初始时没有加载出来,页面显示一片空白,永不体验不好,就可以使用骨架屏,就是在页面内容还未加载完成的时候,先让一些图片或者固定结构站位, 待内容加载完成之后把他替换掉 思路: webpack中最终生成的html页面使用的是html-webpack-plugin插件,它提供了一系列的事件,我们可以
阅读全文
posted @
2020-06-19 14:13
半夏微澜ぺ
阅读(936)
推荐(0) 编辑
手动搭建vue-cli时,出现的错误
摘要:webpack打包模块的源码 执行顺序 1 把所有的模块代码放入函数中,用一个数组保存起来2 根据require时传入的数组索引,能知道需要哪一段代码3 从数组中,根据索引取出包含我们代码的函数4 执行该函数,传入一个对象 module.exports5 我们的代码,按照约定,正好是用module.
阅读全文
posted @
2020-06-02 16:24
半夏微澜ぺ
阅读(652)
推荐(0) 编辑
webpack 拷贝插件copy-webpack-plugin
摘要:将单个文件或整个目录复制到构建目录 安装 npm install copy-webpack-plugin --save-dev const CopyPlugin = require('copy-webpack-plugin'); module.exports = { plugins: [ new C
阅读全文
posted @
2020-05-26 16:52
半夏微澜ぺ
阅读(17578)
推荐(1) 编辑
webpack-dev-server
摘要:webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务,主要提供两个功能: 1 为静态文件提供服务 2 自动刷新和热更新(HMR) 安装 npm install webpack-dev-server --
阅读全文
posted @
2020-05-26 16:22
半夏微澜ぺ
阅读(290)
推荐(0) 编辑
clean-webpack-plugin 打包删除无用的文件
摘要:clean-webpack-plugin用于删除/清除构建文件夹 默认情况下,此插件将output.path 在每次成功构建后删除webpack目录中的所有文件以及所有未使用的webpack资产 npm install clean-webpack-plugin --save-dev demo con
阅读全文
posted @
2020-05-26 15:54
半夏微澜ぺ
阅读(1321)
推荐(0) 编辑
extract-text-webpack-plugin 实现webpack打包分离css
摘要:webpack的打包机制,webpack本来只能打包处理js文件,但是通过强大的loader之后,可以打包处理各种类型的文件,默认都打包到一个bundle.js里面了。 为了把css从js中抽离处理就用到了extract-text-webpack-plugin 用法: npm install ext
阅读全文
posted @
2020-05-26 15:23
半夏微澜ぺ
阅读(947)
推荐(0) 编辑
html-webpack-plugin 单文件/多文件以及配置自定义模板
摘要:原理 插件的基本作用就是生成html文件,原理很简单: 将 webpack 中 entry 配置的相关入口 chunk 和 extract-text-webpack-plugin 抽取的 css 样式 插入到该组件提供的 template 或者 templateContent 配置项指定的内容基础上
阅读全文
posted @
2020-05-25 16:57
半夏微澜ぺ
阅读(1941)
推荐(0) 编辑
vuecli中一些配置的解释以及webpack基础知识点
摘要:webpack.dev.config.js devServer:是启动http服务器到指定的端口,这时不会在./dist下面生成静态文件,原因是devServer会把构建的文件保存在内存中,需要通过http访问。 它不会理会配置中的output.path属性,所以要获取bundle.js正确的url
阅读全文
posted @
2020-05-22 17:03
半夏微澜ぺ
阅读(340)
推荐(0) 编辑
vue-cli中理不清的assetsSubDirectory和assetsPublicPath
摘要:index:模板//nidex文件生成在当前目录的上一级的dist文件夹下 assetsRoot:打包后文件要存放的路径,//在当前目录的上一级的dist目录下输出资源文件 assetsSubDirctory:除了index.html之外的静态资源要存放的路径 // 把所有的静态资源打包到dist是
阅读全文
posted @
2020-05-22 14:02
半夏微澜ぺ
阅读(586)
推荐(0) 编辑
webpack-dev-server 不是内部命令
摘要:今天遇到一个问题,vue项目直接哎vscode中打开,在vscode中自带的命令窗口运行npm run dev,报错,提示缺少模块,于是就删除node_modules文件,重新安装依赖, 这时提示webpack-dev-server不是内部命令,不知道是什么原因,但是直接在项目所在目录下打开命令窗口
阅读全文
posted @
2020-04-02 14:21
半夏微澜ぺ
阅读(1215)
推荐(0) 编辑
webpack 安装vue(两种代码模式compiler 和runtime)
摘要:使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-co
阅读全文
posted @
2019-08-20 14:14
半夏微澜ぺ
阅读(2441)
推荐(0) 编辑
webpack配置babel-loader
摘要:需要安装的插件: cnpm i -D babel-core babel-loader babel-plugin-syntax-jsx babel-plugin-transform-runtime babel-plugin-transform-vue-jsx babel-preset-env babe
阅读全文
posted @
2019-08-20 11:39
半夏微澜ぺ
阅读(1346)
推荐(0) 编辑
webpack
摘要:webpack是一个基于node的项目,首先我们需要在根目录下生成package.json文件,执行cnpm init webpack命令执行后,默认载入当前目录的webpack.config.js 在本地使用webpack-dev-server开发一个express静态资源服务器,可以以监听模式自
阅读全文
posted @
2018-12-17 15:19
半夏微澜ぺ
阅读(124)
推荐(0) 编辑
webpack.definePlugin
摘要:允许你创建一个在编译时可以配置的全局常量,这可能会对开发模式和发布模式允许不同的行为非常有用。比如,你可能会用一个全局的常量来决定log在开发默认触发而不是在发布模式。 示例: new webpack.DefinePlugin({ PRODUCTION:JSON.stringfy(true), VE
阅读全文
posted @
2018-11-21 13:56
半夏微澜ぺ
阅读(2617)
推荐(0) 编辑
webpack配置
摘要:path 模块是Node内置的模块,__dirname是一个全局变量,代表当前路径,可以防止不同的操作系统之间文件路径问题。 entry和output entry可以是单个字符串,入口文件是单个文件,output对应也是单个文件 entry是数组,说明入口文件有多个,多个入口文件对应一个输出文件ou
阅读全文
posted @
2018-04-08 16:06
半夏微澜ぺ
阅读(254)
推荐(0) 编辑
webpack 知识点总结
摘要:1 webpack 的不同点: 1.1 实现代码分割 1.2 loaders 1.3 plugin system 2 webpack 打包css,需要使用css-loaders 使webpack识别css文件,第二步需要使用style-loaders使css文件可以加载到html中的style 3
阅读全文
posted @
2018-04-03 15:48
半夏微澜ぺ
阅读(220)
推荐(0) 编辑
webpack 小demo
摘要:1 安装node.js 2 安装cnpm 3 安装webpack cnpm install --save-dev webpack 对于大多数项目,我们建议本地安装。这可以使我们在引入破坏式变更的依赖时,更容易分别升级项目。 安装最新版本的webpack cnpm install --save-dev
阅读全文
posted @
2018-03-21 16:04
半夏微澜ぺ
阅读(190)
推荐(0) 编辑
webpack 小记
摘要:1 安装webpack cnpm install --save-dev webpack 2 npm初始化生成package.json文件 cnpm init 3 初始化项目目录
阅读全文
posted @
2018-03-16 18:02
半夏微澜ぺ
阅读(83)
推荐(0) 编辑
使用webpack报错
摘要:意思是: 意思是CLI被移动到了一个专门的包 webpack-cli里了。请安装webpack-cli 的除了webpack本身使用cli当用npm时,使用npm install webpack-cli -D安装。当用yarn时,使用yarn add webpack-cli -D安装。 解决办法是
阅读全文
posted @
2018-03-16 14:48
半夏微澜ぺ
阅读(243)
推荐(0) 编辑