前端vue相关

webpack

webpack官方中文网站：

.sass–>.css

打包并处理成成浏览器可以识别的文件和代码，比如sass(scss)转为css，图片压缩等

assets:一般存放开发过程中自己写的静态资源(image, css, js等)

目前流行的前端模块化规范有CommonJS、AMD、CMD以及ES6(常用)的模块系统

webpack对项目进行模块化管理，并处理模块间的依赖，webpack依赖node环境。node环境要能正常运行的话依赖很多的包，npm就作为node的一个包管理工具。

全局安装：npm install 包名@version -g
局部安装：npm install 报名@version --save-dev //--save-dev是开发时依赖，项目打包后不需要继续使用的

webpack一般包含两个文件夹，src和dist，src存放源码，dist存放打包后的文件

webpack的配置文件：webpack.config.js

npm init 填写完各类资料后，会生成一个package.json，此时使用npm install命令会安装package.json里的依赖。package.json是npm包管理文件，文件中的scripts项定义命令的映射，原始命令和在终端上执行有些不同，原始命令写在scripts里的时候会优先找本地(也就是当前项目)的包，而直接在终端执行原始命令时优先使用的是全局的包，那么在终端执行原始命令时可能会因为clone下来的项目需要的包和全局安装的包需要的包的版本不一致而导致打包出现错误。node_modules里的包就是本地安装的依赖包。

视频上说package.json中的scripts脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin/路径中对应的命令，如果没有找到，会去全局的环境变量中寻找。scripts中定义的“build”：“webpack”，npm的执行命令为npm run build

package.json中devDependencies是开发时依赖，打包完后不再使用，dependencies是运行时依赖，打包完后还需要用的依赖。这两个配置都是局部或者全局安装包时自动生成的，不需要手动配置。

以上讲的都是针对js模块化开发以及打包的场景。但在实际的应用中，不仅有js，还需要加载css、图片、也包括一些高级的将es6转成es5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等。将这些文件转成浏览器能识别的，这时候就需要给webpack扩展对应的loader。webpack只能理解JavaScript和json文件，loader能让webpack去处理其他类型的文件，并将他们转化成有效模块，以供应用程序使用，以及被添加到依赖图中。