#什么是webpack ####webpack 是一个用于现代 JavaScript 应用程序的主流模块化打包工具。压缩工具。它有着 高度可配置性，可以很好满足各类项目需求。
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
##此时会生成这样一个目录
#开始实操配置，重点来了
###1.创建index.html作为dom挂载文件
###2.创建src下的基础项目目录表
##2.由浅入深，先从react + js开始 ###下载react以及react和js相关babel-loader
npm install react react-dom --save
记住要先下babel-loader再跟后面babel，如此版本才会对应
npm install babel-loader @babel/preset-react @babel/preset-env @babel-core --save-dev
###这时只打包了一个main.js,我们的index.html并没有打包过来，这需要我们下载插件打包index.html到dist目录
npm install html-webpack-plugin --save-dev
修改webpack.config.js配置
修改src/index.js
此时已经可以看到页面了,js + react配置成功
npm install style-loader css-loader --save-dev
如果以模块形式引入样式，配置应该如下。(注意：引入antd组件后.css的rule得把modules设置为false，否则antd组件样式无效)
##3.那我们在集成一下antd 以及less，sass，stylus
npm install antd --save
我们可以使用这个插件babel-plugin-import按需引入,并修改如下配置npm install babel-plugin-import --save-dev
此时可以直接使用没有问题（注意：把css-loader下的module改为false）
集成 less， sass, stylus,
npm install less less-loader sass sass-loader node-sass stylus stylus-loader --save-dev
配置如下:(注意 1. postcss 是处理.css文件做浏览器兼容补全用的包. 2. 安装sass需要安装node-sass)
现在我们的预处理器就安装并配置好了，可以随心所欲的使用less,sass,stylus了
接下来再兼容配置ts+tsx
npm install @babel/preset-typescript @babel/plugin-transform-runtime --save-dev
##4.现在开发中都缺不了路由和状态管理，dva是一个很好的状态管理库，我们集成一下
安装： npm install react-router-dom dva --save
修改index.js 入口文件
新建router文件夹，router/index.js 为路由文件，随意写下配置router就可以访问页面了，下面是个简单示例
如此最简单的路由也配置好了
dva的使用我贴下简单示例
src下建models文件夹，新建home.js
其中state就是状态存储的地方，用下面方式关联此状态，修改方式通过dispath触发model里的reducers
好了，状态管理库关联好了
npm install webpack-dev-server --save-dev
-
- mini-css-extract-plugin 抽离css并独立为css文件，优于extract-text-webpack-plugin
-
- clean-webpack-plugin 清除 打包之后 dist 目录下的其他多余或者无用的代码
-
- webpackbar 构建时的进度条
-
- optimize-css-assets-webpack-plugin 减小 css 打包后的体积
-
- compression-webpack-plugin 启用 gzip 压缩，可大幅缩减传输资源大小
更多插件可看官方文档 webpack官网