分类：WebPack

2020
10-10

详解webpack的文件监听实现(热更新)

前言文件监听是在源码发生变化时，自动重新构建出新的输出文件。webpack开启监听模式，有两种方式：1.启动webpack命令时，带上--watch参数。 唯一缺点：需要手动刷新才能看到变化；2.在配置webpack.config.js中设置watch:true。 优点：(1)WDS不刷新浏览器(2)WDS不输出文件，⽽是放在内存中(3)使⽤用HotModuleReplacementPlugin插件1第一种方式，--watch1.1配置package.json{//..... 继续阅读 >

2020
10-10

vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

更改build/utils.js文件中ExtractTextPlugin插件的options配置：if(options.extract){returnExtractTextPlugin.extract({use:loaders,publicPath:'../../',//注意配置这一部分，根据目录结构自由调整fallback:'vue-style-loader'})}else{return['vue-style-loader'].concat(loaders)}补充知识：webpack打包运行vue项目后找不到.ttf及.woff文件，或者路径报错webpack.base.config文件中,有的人可能在util... 继续阅读 >

2020
10-09

maptalks+three.js+vue webpack实现二维地图上贴三维模型操作

我们不是走在坑里就是走在前往坑的路上_(:з?∠)_最终效果如图：（地图上添加一个“三维地图”的toolbar按钮，点击后在二维地图上贴上建好的三维模型点击显示弹框）以下都在已经引入并且初始化maptalks地图的基础上，如何引入使用maptalks可以查看以下文章https://www.jb51.net/article/192983.htm1、安装maptalks.three包npminstallmaptalks.three2、安装three包npminstallthree3、安装obj-loader和mtl-loader包npmi--save... 继续阅读 >

2020
10-09

解决vue+webpack项目接口跨域出现的问题

1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost)proxyTable:{'/api':{target:'http://10.xx.xx.xx:8080/renter-server',//开发环境//target:'http://10.xx.xx.xx:8080/renter-server',//生产环境接口changeOrigin:true,pathRewrite:{'^/api':'/'}}},host:'自己的IP或者默认的localhost',//canbeoverwrittenbyprocess.env.HOST在使用axios... 继续阅读 >

2020
10-08

使用Webpack 搭建 Vue3 开发环境过程详解

从零开始使用Webpack搭建Vue3开发环境创建项目首先需要创建一个空目录，在该目录打开命令行，执行npminit命令创建一个项目，这个过程会提示输入一些内容，完成后会自动生成一个package.json文件Webpack的配置文件projectproject-name+|-index.html|-package.json+|-webpack.config.js+|-/src+|-index.jswebpack.config.js'usestrict'constpath=require('path')constHtmlWebpackPlugin=require('html-w... 继续阅读 >

2020
10-08

webpack+vue-cil 中proxyTable配置接口地址代理操作

在项目开发的时候，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们现在使用vue-cli进行项目打包的时候，我们在本地启动服务器后，比如本地开发服务下是http://localhost:8080这样的访问页面，但是我们的接口地址是http://xxxx.com/save/index这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，因此我们需要在打包的时候配置一下，我们进入config/index.js代码下如下... 继续阅读 >

2020
10-08

利用webpack理解CommonJS和ES Modules的差异区别

前言问：CommonJS和ESModules中模块引入的区别？CommonJS输出的是一个值的拷贝；ESModules生成一个引用，等到真的需要用到时，再到模块里面去取值，模块里面的变量，绑定其所在的模块。我相信很多人已经把这个答案背得滚瓜烂熟，好，那继续提问。问：CommonJS输出的值是浅拷贝还是深拷贝？问：你能模拟实现ESModules的引用生成吗？对于以上两个问题，我也是感到一脸懵逼，好在有webpack的帮助，作为一个打包工具，它... 继续阅读 >

2020
10-07

webpack+express实现文件精确缓存的示例代码

由于最近开发的个人博客（Vue+node）在使用过程中，发现网络加载有点慢，所以打算对它进行一次优化。本次优化的目标如下：index.html设置成no-cache，这样每次请求的时候都会比对一下index.html文件有没变化，如果没变化就使用缓存，有变化就使用新的index.html文件。其他所有文件一律使用长缓存，例如设置成缓存一年maxAge:1000*60*60*24*365。前端代码使用webpack打包，根据文件内容生成对应的文件名... 继续阅读 >

2020
10-06

webpack 如何同时输出压缩和未压缩的文件的实现步骤

有的时候我们想要同时生成压缩和未压缩的文件，比如我们构建lib包的时候，我们希望用户能够使用压缩过后的代码文件作为cdn文件，最简单的一个方式就是通过指定环境变量，比如指定MINIFY，如下：constpath=require('path')constisMinify=process.env.MINIFY/***@type{import('webpack').Configuration}*/constconfig={entry:{index:'./src/index.js'},output:{filename:isMinify?'[name].min.js... 继续阅读 >

2020
10-05

vue webpack build资源相对路径的问题及解决方法

默认情况webpack+vue-cli打包的css、js等静态资源路径都是绝对的，即static在根目录下，如果部署到带有文件夹目录的项目中，资源路径就会出错。如图：解决方法:在webpack.prod.conf.js中，output中添加或者修改为publicPath:‘./'；output:{publicPath:'./',path:config.build.assetsRoot,filename:utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename:utils.assetsPath('js/[id].[chunkhash].js')},这是修改... 继续阅读 >

2020
10-01

webpack安装配置与常见使用过程详解（结合vue）

webpack介绍和安装webpack：前端模块化打包工具安装webpack需要安装Node.js，Node.js自带软件包管理工具npm查看自己的node版本：node-v全局安装webpackcnpminstallwebpack-g查看webpack版本webpack--version局部安装webpackcnpminstallwebpack--save-dev为什么全局安装之后还需要局部安装？在终端直接执行webpack，使用的是全局webpack如果在package.json中定义了script，其中包含了webpack命令，那么使用的是局部webpackw... 继续阅读 >

2020
09-28

webpack+vue.js构建前端工程化的详细教程

本篇主要介绍三块知识点：node.js,vue.js,webpack前端工程化，希望对您能有所帮助。本文来自于csdn,由火龙果软件Alice编辑推荐。node.js基本入门node.js介绍node.js可以让javascript程序在后端运行起来。我们之前所熟知的javascript都是运行在前端浏览器，我们编写好了javascript代码后，由浏览器解释执行。而node.js，可以让我们编写javascript，然后在后端运行起来。现在的javascript和java、python一样，可以操作I/O、操作数... 继续阅读 >

2020
09-28

深入webpack打包原理及loader和plugin的实现

本文讨论的核心内容如下：webpack进行打包的基本原理如何自己实现一个loader和plugin注：本文使用的webpack版本是v4.43.0,webpack-cli版本是v3.3.11，node版本是v12.14.1，npm版本v6.13.4(如果你喜欢yarn也是可以的)，演示用的chrome浏览器版本81.0.4044.129（正式版本）（64位）1.webpack打包基本原理webpack的一个核心功能就是把我们写的模块化的代码，打包之后，生成可以在浏览器中运行的代码... 继续阅读 >

2020
09-28

让IDE识别webpack的别名alias的实现方法

许多项目脚手架默认就会把src目录添加一个@别名，项目中实际引入时，虽然可以精简路径，但也带来一个很麻烦的问题：IDE无法识别这些别名，因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。偶然发现vscode的web项目里有一个jsconfig.json文件，如：{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]},"target":"ES6","module":"commonjs","allowSyntheticDefaultImpo... 继续阅读 >

2020
09-28

在Webpack中用url-loader处理图片和字体的问题

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。一、处理图片文件默认webpack无法处理css文件中的url地址在打包时会报错无论是图片还是字体库只要是url地址都无法处理解决方法：在项目根目录下输入cnpmiurl-loaderfile-loader-D安装url-loader和file-loader(url-loader内部依赖于file-loader)然后在配置文件webpack.config.js中进行配置loade... 继续阅读 >

2020
09-27

详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

第一步:打包开始之前删除'./dist'目录rimraf('./dist',()=>{constprodConfig=require('../../lib/webpack.prod')webpack(prodConfig,(err,stats)\=>{if(err){console.log(err)process.exit(2)}console.log(stats.toString({color:true,modules:false,children:false}))//第三步:将测试规则添加到打包后mocha.addFile(resolve(\_\_dirname,'./html-test.js'))mocha.addFile(resolve(\_\_dirname,'.... 继续阅读 >