![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
涵一
做自己
展开
-
npm安装本地包
1、npm安装本地包1)安装本地包的方式:npm install 待安装包的相对路径2)安装示例现有一项目,其根目录下有一个私有npm包(“my-test-npm”),需将该私有包添加为项目依赖包。现有项目根目录结构,如下图所示添加依赖执行命令(npm install ./my-test-npm),如下图所示:package.json文件依赖包添加成功后,package.json中可见该依赖包信息2、npm卸载本地包npm uninstall 待卸载包的相对路径...原创 2021-11-11 15:31:11 · 20263 阅读 · 2 评论 -
如何查看Vue CLI 3 项目的 webpack 配置信息
查看vue cli3项目的webpack配置信息npx vue-cli-service inspect --mode [production|development]导出vue cli3项目的webpack配置信息到文件npx vue-cli-service inspect --mode [production|development] >> fileName原创 2021-07-06 14:08:52 · 564 阅读 · 0 评论 -
history模式的单页面应用刷新后页面404的解决办法
一、问题描述采用history模式的vue的单页面应用,刷新时404。问题分析:vue-router设置的路径不是真实存在的路径,故页面刷新后访问的资源在服务端找不到二、解决办法1、本地调试时,解决404的办法webpack配置文件修改:module.exports = { //... devServer: { historyApiFallback: true, // 自动将404响应跳转到首页入口文件 index.html }};在devServer里面有个hist原创 2021-02-01 14:36:12 · 4395 阅读 · 0 评论 -
vue热更新慢的解决办法
1)安装插件:‘babel-plugin-dynamic-import-node’npm install babel-plugin-dynamic-import-node -D2)修改配置文件:babel.config.jsmodule.exports = { env: { development: { plugins: ['dynamic-import-node'] } }}原创 2020-10-26 13:36:52 · 1883 阅读 · 0 评论 -
vue多页面应用如何针对其中的某个页面进行单独打包
一、应用场景:多个项目需要用到共同的组件,这时用多页面vue应用再适合不过了。但是这多个项目需要分别部署在不同服务器上,所以需要我们针对每个项目(即每个页面)进行单独打包。二、单独打包某个页面:这里我们以单独打包vue多页面应用中的其中一个页面(detail.html)为示例进行说明。1)创建新的打包模式:新建文件".env.detail"# set ENVNODE_ENV = 'production'# 需要打包的页面PAGE_NAME = 'detail'2)配置打包指令:修改pac原创 2020-10-26 11:30:10 · 7514 阅读 · 0 评论 -
vue项目依赖文件拆分
需求背景:在构建vue单页面项目时,会将所有依赖打包成一个文件,如果依赖文件过大,会影响页面渲染。为了好的用户体验我们需要对依赖文件进行拆分,那么如何拆分呢?解决方案:修改webpack的配置文件externals,从输出的依赖文件中排除某些依赖包,将被排除的依赖包单独引入到html页面中。示例:1)webpack配置文件修改externals: { 'vue': 'Vue', 'element-ui': 'ElementUI',}2)去除main.js中element-ui的引原创 2020-10-22 10:45:52 · 1031 阅读 · 0 评论 -
css3前缀自动补全
1、安装自动补全css3前缀的插件:autoprefixernpm install -D autoprefixer2、修改package.json文件// package.json文件部分代码"browserslist": [ "> 1%", "last 2 versions", "ie > 8"]3、添加.postcssrc.js文件//.postcssrc.jsmodule.exports = { plugins: { autoprefixer:原创 2020-09-01 09:48:16 · 834 阅读 · 0 评论 -
webpack-bundle-analyzer文件大小分析工具
1、安装分析工具:npm intall webpack-bundle-analyzer -D2、webpack.prod.config.js 中添加如下代码if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnaly...原创 2019-12-11 15:09:25 · 3038 阅读 · 0 评论