qq_42728133的博客

初级使用vue开发index.html文件main.js入口文件如果后面自定义了组件，也必须修改index.html来使用组件。因为在项目开发中一般不能修改index.html文件，那就需要在使用template。第二阶段抽取index.html中的内容，写到入口文件main.js的template中此时，index.html中只剩下。之后index.html文件不再改变第三阶段随着template中的内容越来越多，template会越写越多，所以也要将其抽.

1、先使用npm安装Vue模块命令：npm install vue --save因为项目在运行的时候也需要依赖vue，所以并不是开发时依赖，不需要加-dev2、在入口文件导入vue3、为了正常显示，指定vue版本

1、安装url-loader2、在webpack.config.js文件下的module中配置url-loader3、如果加载的图片大于limit的值，安装了file-loader之后，图片仍然是不能正常显示的，因为webpack会将生成的路径直接返回给使用者，但是，整个程序是打包在dist文件夹下的，所以还需要在路径中再添加一个dist/...

1、安装less-loader和lessless-loader：加载lessless：转化less2、在module中配置。加载顺序依次是less-loader，css-loader，style-loader

为什么要使用loader？在开发中不仅有基本的js代码处理，也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成SE5代码，将scss、less转成css，将。jsx、.vue文件转成js文件等等。对于webpack本身来说，他是不支持这些转化的。那么就用到了loader。loader使用过程：1、通过npm安装需要使用的loader，css-loader和style-loadercss-loader：npm install --save-dev css-lo

1、如果项目依赖node，一般都会创建一个json文件。创建json文件命令，在终端输入npm init,一路回车。生成的json文件里面就是关于项目的一些基本信息。如果json文件还依赖一些其他，需要在终端输入npm install ，相关的依赖会下载到项目的文件夹中。2、创建webpack.config.js文件，该文件规定了项目的入口和接口文件。3、在json文件中定义执行脚本，运行命令再形成一层映射。直接输入npm run build就是使用本地的webpack启动模块打包.

一、Webpack是什么？官方解释：webpack是一个现代的JavaScript应用的静态模块打包工具。模块化：webpack其中一个核心就是让我们进行模块开发，，并且帮助我们处理模块之间的依赖关系。而且不仅仅是JavaScript文件，css、图片、json文件等在webpack中都可以当作模块来使用。打包：将webpack中的模块资源进行打包，合并成一个或多个包。二、与node、npm的关系?webpack是模块化打包，为了让webpack可以正常运行，必须依赖node环境。node环境为