webpack相关

1. npm是第三方包管理器，npm init 之后会生成一个package.json文件，里面展示了项目中依赖的第三方包信息。

   下载完node之后，npm就自动下载好了。

   npm i packageName -S （-S 是 --save的缩写，依赖会保存在package.json文件的dependencies里面，意思是这个包在生产环境中需要，用户会用到这个包）

   npm i packageName -D （-D 是 --save-dev的缩写，依赖会保存在package.json文件的devDependencies里面，意思是这个包只是在开发环境中需要，用户运行不需要这个包）

2. vue项目中已经配置了webpack，vue-cli就是基于nodejs和webpack封装的命令行工具。

              webpack就是用于项目打包，在生产环境中有一个重要的作用就是减少http请求，webpack把多个文件打包到一个js里，这样请求数就可以减少好多。

             它做的事情是，分析项目结构，找出各个文件之间的依赖关系，生成一个依赖图并用文件的形式保存下来，未来浏览器运行代码的时候就可以读取这个文件，知道各个 代码块之间的关联以及如               何调用。

 

webpack的主要功能有以下几点：

（1）配置入口文件entry：webpack打包的入口文件，根据入口文件一步步分析各文件之间的依赖关系。

（2）配置出口文件output：webpack打包好的文件放在那里，默认是dist文件夹。

（3）module里配置loader：webpack自身只理解js，loader可以处理那些非js文件，将所有类型文件转为webpack可以处理的有效模块。

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

2. use 属性，表示进行转换时，应该使用哪个 loader。

        比如：webpack可以将浏览器不能直接运行的扩展语言转化为浏览器可以运行的。比如将sass less ->css， es6 ts->js 。

（4）插件plugins：loader 被用于转换某些类型的模块，而插件则可以用于==执行范围更广的任务==。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

        比如：HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。该插件将为你生成一个 HTML5 文件，自动引入打包输入的所有资源（css/js）。