【手动搭建项目】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