![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 59
qq_32021429
这个作者很懒,什么都没留下…
展开
-
Vue项目报错:Object.entries is not a function
vue配置babel解决浏览器兼容问题原创 2022-06-07 17:21:51 · 2717 阅读 · 2 评论 -
前端工程化学习之webpack的使用
webpack知识前端工程化:模块化,组件化,规范化,自动化(自动化构建,自动化部署,自动化测试)使用webpack作为前端构建工具:代码优化:ts编译成js;less/sass编译成css等文件优化:压缩js、css、html代码,压缩合并图片等代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载模块合并:在采用模块化的项目中会有很多个模块和文件,需要构建功能把所有模块合并成一个文件自动刷新:监听本地源代码的变化,自动重新构建代码,刷新浏览器代码检验:在代码被提交到原创 2020-11-11 10:33:38 · 204 阅读 · 0 评论 -
前端工程化学习之webpack的优化
webpack的各种优化1.删除无用的csspurgecss-webpack-plugin:删除无用的css插件glob:功能是查找匹配的文件先下载这两个包,再去webpack.config.js文件中进行配置2.图片压缩image-webpack-loader安装这个加载器的时候会遇到各种坑,如果丢包就用cnpm多下载几次安装成功之后运行 npm run dev会报一个错Automatic publicPath is not supported in this browser解决办法原创 2020-11-12 14:56:35 · 289 阅读 · 0 评论 -
webpack学习之webpack的基本配置
webpack 打包工具 grunt gulp;代码转换less/sass --> csses6/es7/es8 --> es5ts --> js压缩文件压缩JS、CSS图片转为base64代码分割:提取公用代码模块合并:把多个模块合并自动刷新(热更新):代码改变,自动刷新页面模块化开发单例模式(高级单例模式:闭包返回一个对象)commonJS 规范(node):每一个文件都是一个单独的模块(浏览器不支持)导出:module.exports引原创 2020-11-13 15:20:09 · 152 阅读 · 0 评论 -
webpack学习之webpack的多入口和多出口配置
webpack的多入口多出口配置// webpack.prod.js文件配置let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');let {CleanWebpackPlugin} = require('clean-webpack-plugin');module.exports = { mode: 'production', // 打包环境(生产环境) // 多入口时,ent原创 2020-11-14 14:34:02 · 309 阅读 · 0 评论 -
webpack学习之webpack解析样式文件
webpack学习之webpack解析样式之前提到的插件是为了实现某些功能的,而加载器则是用来解析各种文件的。通常加载器都是配置在rules下的1、解析css文件webpack只识别js文件,所以遇到css文件时,需要借助一些加载器。解析加载css文件需要两个loader:style-loader、css-loader module: { rules: [ // 存放各种loader:使用loader的顺序是:从下往上 { test: /\.css$/,原创 2020-11-16 09:56:01 · 168 阅读 · 0 评论 -
webpack学习之webpack处理字体图标
webpack学习之webpack处理字体图标在讲webpack处理字体图标之前先讲一下css文件的压缩默认打包的css文件是不压缩的,即便是生产环境也只是压缩js和html压缩css文件使用插件: optimize-css-assets-webpack-plugin如果只是单独使用了这个插件,那么js反而又不压缩了,所以还需要用到压缩js的插件:terser-webpack-plugin// 安装之后再 webpack.config.js中引入// 压缩csslet OptimizeCs原创 2020-11-16 15:54:42 · 291 阅读 · 0 评论 -
webpack学习之webpack关联babel
webpack学习之webpack关联babelbabel 是为了把高级JS语法转为低版本语法,它跟 webpack 是两个互不相关的工具,要想将它们关联起来,需要借助到:1、 @babel/core:babel的核心模块2、 babel-loader :把 babel 和 webpack 进行关联的桥梁3、@babel/preset-env:预设// 安装完之后去 rules 中进行配置{ test: /\.js$/, // babel是处理js的 use: { load原创 2020-11-17 11:02:16 · 184 阅读 · 1 评论 -
使用@babel/plugin-transform-runtime打包代码还是有重复引入问题
使用@babel/plugin-transform-runtime打包代码还是有重复引入问题在webpack中,将高级API转换依赖于babel插件 @babel/plugin-transform-runtime;但是在配置好之后发现打包后的文件还是有重复引入问题,也是这个插件没有起到减少代码冗余的问题// 原来的配置{ test: /\.js$/, use: { loader: 'babel-loader', presets:[ ['@babel/prese原创 2020-11-17 11:30:26 · 725 阅读 · 0 评论 -
webpack学习之proxy代理配置
webpack学习之proxy代理配置在实际项目中不可避免会遇到跨越问题,webpack中的proxy就是解决前端跨域的方法之一。跨越问题:协议、域名、端口 三者只要有一个与服务端的不一致,就会报跨域错误// webpack.config.jsdevServer: { hot:true, // 它是热更新:只更新改变的组件或者模块,不会整体刷新页面 open: true, // 是否自动打开浏览器 proxy: { // 配置代理(只在本地开发有效,上线无效)原创 2020-11-18 11:15:47 · 1248 阅读 · 0 评论