无论是工作需要还是面试加分，Vue技术栈已经成为前端开发工程师必备的技术点。接下来我将从零开始开发一套完整的Vue项目开发环境，提供给有需要的同仁以后观看回顾。目标是完成Vue官方的脚手架Cli帮我们初始化做那些事情，通过webpack4.x帮我们完成常用功能：ES6/7/8/9等将高级语法转换成ES5stylus/less/scss等css预处理器转换成css解析字体、图片（jpg、png...）等静态资源压缩js、css等文件变量分离来自公开代码项目热更新和懒加载区分生产环境和开发环境每个包删除最后一个包记录...项目初始化检查node环境配置首先在本地和全局安装node环境，vue的运行依赖nodenpm通过管理工具、节点下载地址实现。下载node后，打开cmd管理工具，输入node-v，回车，查看node版本号。如果出现版本号，则表示安装成功。node-vnpm-v初始化项目目录，在命令行输入：mkdirmy-vue-cli新建项目目录cdmy-vue-cli/切换到项目目录npminit生成项目的一些信息，以及最后生成一个package.json文件。注意：不用回车直接输入npminit-y安装webpack即可不能直接将转换后的高级语法转换成浏览器可以解析的js、css文件.在项目根目录本地安装webpack，本项目将使用webpack4.x版本npminstallwebpackwebpack-cli-D初始化项目目录和文件在项目根目录下新建文件：src：项目源码存放目录index.js：webpackbuild需要编译的文件：store项目的webpack配置文件webpack.config.jsprojectwebpack核心配置文件index.html:项目打包后，自动将打包后的文件添加到文件中添加webpack配置文件的基本信息mode:mode,developmentdevelopmentenvironment,production生产环境入口：项目的打包入口文件输出：项目打包后，输出文件module：module，webpack中的所有文件都是modules，解析css、js、图片、字体图标等。斜体“颜色=#CD2626>scripts在打包属性中添加并运行npmrunbuild"build":"webpack--config./build/webpack.config.js"在index.js中添加测试代码验证webpack打包是否正确？functionsum(a,b){returna+b;}varsum=sum(1,2)console.log(sum)如果项目dist目录生成一个bundle.js文件，说明webpack包正确。将核心功能ES6/7/8/9等高级语法配置成ES5，在index.js中添加ES6/7/8等高级语法代码测试代码验证webpack能否将其转换为ES5等低级语法浏览器可以解析。安装相关依赖npminstallbabel-loader@babel/core@babel/preset-env-Dbabel-loader将ES6等高级语法转换成浏览器可以解析的低级语法@babel/core是babel的核心模块，编译器提供转换API@babel/preset-env可以根据配置的目标浏览器或运行环境自动将ES2015+代码转换为es5。修改核心配置文件webpack.config.js然后运行npmrunbuild，可以看到我们输入的ES6+等高级语法已经转换为ES5.注意：babel-loader只会将ES6/7/8等高级语法转换成ES5语法，不会转换新的API。例如Promise、Iterator、Set、Proxy、Symbol等全局对象，以及一些定义在全局对象上的方法（如Object.assign）不会被转码。此时，我们必须使用babel-polyfill为当前环境提供一个shim。npminstall@babel/polyfill-Sbabel-polyfill是为了解决babel-loader无法转换新API的问题，给当前环境添加shim重点：我们在执行打包的时候，打包后的文件里面有很多重复的代码，那么我们就有必要提供一个统一的模块化helper来减少这些helper函数的重复输出。npminstall@babel/runtime@babel/plugin-transform-runtime-D@babel/runtime是提供一个统一的模块化帮手，使用@babel/plugin-transform-runtime可以大大减少打包编译的体积会自动帮我并且在@babel/runtime中动态require内容注意：还有一些常见的babel：@babel/plugin-proposal-decorators改造es6+中更高级的特性---decorator@babel/plugin-proposal-class-properties改造更高级的APIines6---classwriteES6+andotheradvancedsyntaxinindex.jsletfn=()=>{console.log('箭头函数')}fn()letpromise=newPromise((resolve,reject)=>{setTimeout(()=>{resolve(123)},1000)})promise.then(res=>{console.log(res);})stylus/less/scssandothercsspre-set转换处理器为css在项目src目录下添加index.less文件，并将其文件导入到index.js文件中下面以less预处理器为例详细介绍其用法l，另外两个类似：安装相关依赖npminstallstylusstylus-loaderlessless-loadersass-loadernode-sasscss-loaderstyle-loader-Dcss-loader主要作用是解析css文件，like@import等动态语法style-loader主要作用是将css文件解析成stylus中的html样式标签，less，sass是CSSstylus-loader常用的预处理器，less-loader和sass-loader主要是将其对应的语法转换成css语法并修改核心配置文件webpack.config.js增加index.less文件@color:red;#div1{颜色：@color;字体大小：36px；}注意：对于CSS3的很多特性，需要添加各种浏览器兼容的前缀。在开发过程中，这样的添加太麻烦了。postcss会帮你自动添加各种浏览器前缀npminstallpostcss-loaderautoprefixer-Dpostcss-loaderautoprefixer处理浏览器兼容性，自动为CSS3的某些属性添加前缀解析字体、图片（jpg、png...）等静态资源图片、字体等静态资源通常在项目中使用，如果没有使用对应的loader项目会报错安装相关依赖npminstallfile-loaderurl-loader-Dfile-loader可以帮助webpackpack和处理一系列图像文件；例如：.png、.jpg、.jepg等格式的图片打包后的图片会为每张图片生成一个随机的哈希值作为图片的名称。url-loader封装了file-loader。其工作原理：1、文件大小小于limit参数，url-loader会将文件转为Base64；2、如果文件大小大于限制，url-loader会调用file-loader进行处理，参数会直接传递给file-loader修改核心配置文件webpack。生成了很多js文件，代码之间有很多空格，引号等。如果我们删除它们，这将大大减少包的体积。安装相关依赖npminstallmini-css-extract-plugin-D//ornpminstallextract-text-webpack-plugin@next-D//deprecatednpminstalloptimize-css-assets-webpack-plugin-Dnpminstalluglifyjs-webpack-plugin-D//extensiontoeliminateunusedcssnpminstallpurify-webpackpurify-css-D注意：在生产模式下，webpack会自动压缩JS。MiniCssExtractPlugin只推荐用于生产环境，因为该插件在开发环境中会造成HMR功能的丢失，所以日常开发中还是使用style-loader。修改核心配置文件webpack.config.js的常用选项和插件的使用。大家习惯了Ctrl+S。保存代码后，我希望浏览器自动刷新以更新我们的页面。安装相关依赖npminstallwebpack-dev-server-D修改核心配置文件webpack.config.js通过html-webpack-plugin插件创建html文件，自动导入打包好的js文件安装相关依赖npminstallhtml-webpack-plugin-Dhtml-webpack-plugin主要有两个作用：1.每次编译后动态添加hash到html文件中引入的外部资源，如脚本和链接，防止引用缓存外部文件的问题.2.可以在项目根目录下生成创建html入口文件，新建index.html文件文档
