webpack

webpack?

模块化打包器

 

作用：将浏览器不识别的语法 转换成浏览器识别的语法

 

工作流程：

通过一个入口文件，找个这个入口文件所依赖的所有模块 通过loader进行打包，打包成一个或者多个js文件

 

 

webpack vs gulp 区别

 

没有可比性

模块打包机

前端自动化工具

 

 

1、全局安装webpack

cnpm install webpack@3.5.3 -g

 

2、创建文件夹 初始化文件夹

npm init -y

 

3、局部安装webpack

cnpm install webpack@3.5.3 --save-dev

 

4、创建 webpack.config.js

 

5、创建 src dist 文件夹

 

6、处理css的loader

 

cnpm install --save-dev style-loader css-loader sass-loader node-sass

 

7、处理js的loader

cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

 

8、插件

cnpm install html-webpack-plugin --save-dev;

 

9、热更新 服务器

cnpm install webpack-dev-server@2 --save-dev;