webpack
厉害的明大神
这个作者很懒,什么都没留下…
展开
-
webpack的proxy代理配置
webpack的proxy代理配置 在实际项目中不可避免会遇到跨越问题,webpack中的proxy就是解决前端跨域的方法之一。 跨越问题:协议、域名、端口 三者只要有一个与服务端的不一致,就会报跨域错误 // webpack.config.js devServer: { hot:true, // 它是热更新:只更新改变的组件或者模块,不会整体刷新页面 open: true, // 是否自动打开浏览器 proxy: { // 配置代理(只在本地开发有效,上线无效) "原创 2020-11-18 11:23:32 · 13999 阅读 · 0 评论 -
@babel_plugin-transform-runtime重复引入问题
@babel_plugin-transform-runtime重复引入问题 在webpack中,将高级API转换依赖于babel插件 @babel/plugin-transform-runtime; 但是在配置好之后发现打包后的文件还是有重复引入问题,也是这个插件没有起到减少代码冗余的问题 // 原来的配置 { test: /\.js$/, use: { loader: 'babel-loader', presets:[ ['@babel/preset-env',{原创 2020-11-17 11:37:05 · 1157 阅读 · 0 评论 -
webpack关联babel手记
webpack学习之webpack关联babel babel 是为了把高级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:08:11 · 162 阅读 · 0 评论 -
webpack处理字体图标手记
webpack学习之webpack处理字体图标 在讲webpack处理字体图标之前先讲一下css文件的压缩 默认打包的css文件是不压缩的,即便是生产环境也只是压缩js和html 压缩css文件使用插件: optimize-css-assets-webpack-plugin 如果只是单独使用了这个插件,那么js反而又不压缩了,所以还需要用到压缩js的插件: terser-webpack-plugin // 安装之后再 webpack.config.js中引入 // 压缩css let OptimizeC原创 2020-11-16 15:58:31 · 136 阅读 · 0 评论 -
webpack解析样式文件记录
webpack解析样式文件记录 之前提到的插件是为了实现某些功能的,而加载器则是用来解析各种文件的。 通常加载器都是配置在rules下的 1、解析css文件 webpack只识别js文件,所以遇到css文件时,需要借助一些加载器。解析加载css文件需要两个loader:style-loader、css-loader module: { rules: [ // 存放各种loader:使用loader的顺序是:从下往上 { test: /\.css$/, // 匹原创 2020-11-16 11:17:41 · 111 阅读 · 0 评论 -
webpack解析样式手记
webpack学习之webpack解析样式 之前提到的插件是为了实现某些功能的,而加载器则是用来解析各种文件的。 通常加载器都是配置在rules下的 1、解析css文件 webpack只识别js文件,所以遇到css文件时,需要借助一些加载器。解析加载css文件需要两个loader:style-loader、css-loader module: { rules: [ // 存放各种loader:使用loader的顺序是:从下往上 { test: /\.css$/,原创 2020-11-16 11:06:28 · 76 阅读 · 0 评论 -
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:35:30 · 280 阅读 · 0 评论 -
webpack学习之webpack基本配置
webpack 打包工具 grunt gulp; 代码转换 less/sass --> css es6/es7/es8 --> es5 ts --> js 压缩文件 压缩JS、CSS 图片转为base64 代码分割:提取公用代码 模块合并:把多个模块合并 自动刷新(热更新):代码改变,自动刷新页面 模块化开发 单例模式(高级单例模式:闭包返回一个对象) commonJS 规范(node):每一个文件都是一个单独的模块(浏览器不支持) 导出:module.exports 引原创 2020-11-13 15:29:29 · 103 阅读 · 0 评论 -
js学习之webpack的优化
webpack的各种优化 1.删除无用的css purgecss-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:59:03 · 149 阅读 · 0 评论 -
前端工程化学习之webpack
webpack知识 前端工程化:模块化,组件化,规范化,自动化(自动化构建,自动化部署,自动化测试) 使用webpack作为前端构建工具: 代码优化:ts编译成js;less/sass编译成css等 文件优化:压缩js、css、html代码,压缩合并图片等 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载 模块合并:在采用模块化的项目中会有很多个模块和文件,需要构建功能把所有模块合并成一个文件 自动刷新:监听本地源代码的变化,自动重新构建代码,刷新浏览器 代码检验:在代码被提交到原创 2020-11-11 10:38:31 · 183 阅读 · 0 评论