weixin_小白鼠的博客

如何使用vue-cli快速搭建项目，怎么配置环境变量及打包路径，构建单页面与多页面

开发时，并不对代码打包，而实直接采用ESM的方式运行项目一项目部署时，再对项目进行打包其核心原理是利用浏览器现在已经支持ES6的import，碰见import就会发送一个HTTP请求去加载文件使用vite运行项目时，首先会用esbuild。

它分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化使用时要注意它与的版本兼容问题，容易报错webpack5内置的插件 ProgressPlugin 不仅可以看打包进度，还可以分析打包时间，只要将profile设置为true。

一个是打包体积的优化，另一个是代码层面的优化1》首先通过Network面板发现vendor.js体积过大，网路良好情况下加载时间太长），vendor体积太大，加载花了3s？后来发现 js 没开启nginx压缩2》通过 webpack-bundle-analyzer 来具体分析，进一步体积过大的原因，进一步进行打包优化。

webpack5在vue2中的使用，基本配置；webpack的基本流程，webpack的基本概念及配置项，entry、mode、output、loader、plugin等；如何配置基本webpack.config.js来打包的vue单页面和多页面，脚本与环境变量的基本配置

webpack5不同环境配置拆分webpack在不同环境下需要做些不同的配置，比如我们生产环境不需要压缩css和js,不需要devServer等，所以我们需要做区分环境变量问题1：怎么在webpack.config.js中获取env的值呢module.exports可以等于一个函数，函数接收env这个参数，就可以得到值了module.exports=(evn)=>{ return{ console.log(env) }}问题2：怎么配置环境变量的值呢第一种是在打包命令

webpack5从零开始，上手基础知识一、安装、认识webpack安装webpack基于node环境，所以安装webpack前先安装nodenpm install webpack webpack-cli --globalnpm i webpack webpack-cli -D第一种是全局安装，但是官方不建议我们使用全局安装，全局安装的话很可能更新不及时第二种是在项目中安装安装后可查看项目webpack版本信息npx webpack --version我安装的版本是：后面的内容都是这个

webpack相关概念简介是一种前端资源构建工具（将less、sass转css，es6等语法的转换），静态模块打包器将所有资源(html css js)模块处理，根据依赖关系，进行静态分析，打包生成对应的静态资源bundle五个核心概念entry入口以哪个文件为入口起点开始打包，分析构建内部依赖图output输出打包后的资源输出到哪里，打包后的文件如何命名loader预加载Webpack自身只能理解js/json文件，loader可以告诉webpack怎么处理非js文件，比如less-l

webpack基本使用这里所有都是基于webpack4的学习为什么要使用webpackweb开发的困境：文件依赖关系复杂；静态资源请求效率低下；模块化支持不友好；浏览器对高级js兼容性不友好而webpack可以解决这些问题基本打包使用1）npm i webpack webpack-cli -D2) 在项目根目录中创建 webpack.config.js 文件3）配置webpack.config.js文件基本配置：const path = require("path");module.e