webpack

webpack：模块打包机。

　　分析项目结构，找到js模块和其它一些浏览器不能直接运行的拓展语言（scss、typescript等），并将其打包为合适的合适供浏览器使用。

 

工作方式：把项目当做一个整体，通过一个给定的文件（index.js），webpack从这个文件开始找到项目的所有依赖，使用loaders处理他们，最后打包为一个或多个浏览器可以识别的js文件。

 

作用：

　　1、模块化：可以把复杂的程序细化为小的文件。

　　2、打包：把多个js文件打包成一个文件，减少服务器压力。

　　3、转换：把拓展语言转换成为普通的js，让浏览器可以顺利的运行。

　　4、优化：前端越来越复杂，性能会遇到问题，webpack也开始肩负优化和提升性能的责任。

 

拿到webpack项目后干的事：

　　1、初始化项目
　　　　npm init -y

　　2、安装webpack
　　　　cnpm install webpack webpack-cli -D

　　3、创建src文件夹 创建dist文件夹

　　4、创建webpack.config.js文件

　　5、在src中创建入口文件 main.js

　　6、初始打包
　　　　npx webpack

　　7、安装解析JS的babel文件
　　　　cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

　　8、安装解析CSS的loader文件
　　　　cnpm install --save-dev style-loader css-loader sass-loader node-sass

　　9、安装html插件
　　　　cnpm install -D html-webpack-plugin

　　10、安装处理图片的loader
　　　　cnpm install url-loader file-loader -D

　　11 、安装处理vue的文件loader
　　　　cnpm install -D vue-loader vue-template-compiler

　　12、安装vue.js

　　　　cnpm install vue -S

　　13、安装服务器环境
　　　　cnpm install webpack-dev-server -D