![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack学习
一个假的前端男
一个 迷迷糊糊的前端
展开
-
vue 打包后的如何在本地运行
思路:搭建express本地服务器步骤一: 安装express-generatornpm i express-generator -g 步骤二:创建本地服务器在终端通过以下命令:express myExpressProject步骤三:进入项目目录cd myExpressProject 步骤四:安装相关项目依赖注意: 通过终端进入myExpressProject文件,执行下列代码npm i步骤五:把打包后的dist文件夹下的所有文件复制到myExpressProject文件.原创 2020-12-01 12:04:51 · 721 阅读 · 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 · 238 阅读 · 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 · 1460 阅读 · 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 · 100 阅读 · 0 评论 -
webpack(五)-----打包其他资源
这里用到file-loaderfile-loader无法和url-loader同时使用(如有错误请指正)exclude:表示不包括 { exclude:'/\.(css|js|html)$/', loader:'file-loader', }原创 2020-11-25 23:27:57 · 62 阅读 · 0 评论 -
webpack(四)-----图片资源的打包
base64:在客户端本地解码所以会减少服务器压力,如果图片过大还是用base64会导致cpu调用率上升,网页记载时编卡优点:减少请求数量(减轻服务器压力)缺点:图片体积会变大(文件请求时长增加)图片资源的打包主要依赖于file-loader和url-loadertest 属性代表可以匹配的图片类型,除了 png、jpg 之外也可以添加 gif 等,以竖线隔开即开。loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会 自动.原创 2020-11-24 23:37:48 · 261 阅读 · 0 评论 -
webpack(三)-----打包html
1、定义一个包npm init2、下两个包1.通过终端全局安包npm i webpack webpack-cli -g2.通过终端本地安包npm i webpack webpack-cli -D 开发依赖3、下载html-webpack-plugin通过npm i html-webpack-plugin -D原创 2020-11-24 16:37:04 · 114 阅读 · 0 评论 -
webpack(二)-----打包样式资源
创建一个webpack.config.js配置文件作用:指示webpack 做什么(当你运行webpack指令时,会加载里面的配置)所有构建工具都是基于nodejs平台运行的~模块化默认采用commit.jswebpack.config.js配置//resolve用来拼接绝对路径的方法const {resolve}= require('path') //webpack配置module.exports={ //入口起点: entry:'./src/index.js',原创 2020-11-23 23:54:27 · 144 阅读 · 0 评论 -
webpack的初次使用
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能1、创建一个包在终端通过npm init创建一个包1、创建一个包1、通过终端全局安包npm i webpack webpack-cli -g2、通过终端本地安包npm i webpack webpack-cli -D 开发依赖3、在src下创建一个index.js的入口文件 1、运行指令.原创 2020-11-23 23:06:56 · 142 阅读 · 1 评论