webpack学习
一个假的前端男
一个 迷迷糊糊的前端
展开
-
vue 打包后的如何在本地运行
思路:搭建express本地服务器 步骤一: 安装express-generator npm i express-generator -g 步骤二:创建本地服务器 在终端通过以下命令: express myExpressProject 步骤三:进入项目目录 cd myExpressProject 步骤四:安装相关项目依赖 注意: 通过终端进入myExpressProject文件,执行下列代码 npm i 步骤五:把打包后的dist文件夹下的所有文件复制到myExpressProject文件.原创 2020-12-01 12:04:51 · 732 阅读 · 0 评论 -
webpack(七)-----单独提取css样式
说明 提取css样式需用到mini-css-extract-plugin插件 第一步:插件安装 npm i mini-css-extract-plugin -D 第二步:引用const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 第三步:用MiniCssExtractPlugin.loader替换到原来的style-loader 第四步:放入plugins中 注:MiniCssExtractPlugin.loader和style原创 2020-11-30 23:39:29 · 253 阅读 · 0 评论 -
如何修改Vue打包后文件的接口地址配置
常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的。如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效。那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 步骤一:在public文件下新建一个config.js文件 window.global_config = { BASE_URL: 'http.原创 2020-11-30 16:31:37 · 1474 阅读 · 1 评论 -
webpack(六)-----webpack-dev-server 的认识
俗称热更新(此版本为webpack5.0以上) 开启服务器devServer:用来自动化自动编译,自动打开浏览器,自动刷新浏览器 特点:只会在内存中编译打包,不会有任何输出 contentBase:代表html页面所在的相对目录 compress:是否启动gzip压缩 port:端口 //引入地址拼接 const { resolve } = require('path') //解析html的插件 const HtmlWebpackPlugin = require('html-webpack.原创 2020-11-27 14:39:57 · 108 阅读 · 0 评论 -
webpack(五)-----打包其他资源
这里用到file-loader file-loader无法和url-loader同时使用(如有错误请指正) exclude:表示不包括 { exclude:'/\.(css|js|html)$/', loader:'file-loader', }原创 2020-11-25 23:27:57 · 69 阅读 · 0 评论 -
webpack(四)-----图片资源的打包
base64:在客户端本地解码所以会减少服务器压力,如果图片过大还是用base64会导致cpu调用率上升,网页记载时编卡 优点:减少请求数量(减轻服务器压力) 缺点:图片体积会变大(文件请求时长增加) 图片资源的打包主要依赖于file-loader和url-loader test 属性代表可以匹配的图片类型,除了 png、jpg 之外也可以添加 gif 等,以竖线隔开即开。 loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会 自动.原创 2020-11-24 23:37:48 · 272 阅读 · 0 评论 -
webpack(三)-----打包html
1、定义一个包 npm init 2、下两个包 1.通过终端全局安包npm i webpack webpack-cli -g 2.通过终端本地安包npm i webpack webpack-cli -D 开发依赖 3、下载html-webpack-plugin 通过npm i html-webpack-plugin -D原创 2020-11-24 16:37:04 · 119 阅读 · 0 评论 -
webpack(二)-----打包样式资源
创建一个webpack.config.js配置文件 作用:指示webpack 做什么(当你运行webpack指令时,会加载里面的配置) 所有构建工具都是基于nodejs平台运行的~模块化默认采用commit.js webpack.config.js配置 //resolve用来拼接绝对路径的方法 const {resolve}= require('path') //webpack配置 module.exports={ //入口起点: entry:'./src/index.js',原创 2020-11-23 23:54:27 · 154 阅读 · 0 评论 -
webpack的初次使用
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能 1、创建一个包 在终端通过npm init创建一个包 1、创建一个包1、通过终端全局安包npm i webpack webpack-cli -g 2、通过终端本地安包npm i webpack webpack-cli -D 开发依赖 3、在src下创建一个index.js的入口文件 1、运行指令.原创 2020-11-23 23:06:56 · 208 阅读 · 1 评论