这里使用express/webpack-dev-server建服务器
- 自刷脚本
- 自刷内容
- 自刷样式
- 自刷配置
- 样式提取
- 自动前缀
- 预编样式
- 样式压缩
- 字体图标
- 前沿脚本
#获取代码
git clone -b 3.1.2 https://github.com/YMC-GitHub/cssLib-dev-tool.git
#研发
npm run dev
#生产
npm run pro:webpack4
#分析
npm run study通过下面的命令分别使用生产模式和研发模式
# 研发模式
npm run dev:webpack4
npm run dev:simple-server
npm run dev:complex-server
npm run dev:custom-server
npm run dev
# 生产模式
npm run pro:webpack4
npm run pro01.研发时的脚本入口文件 config
02.生产时的脚本入口文件 config
01.研发时的脚本输出文件 config
02.生产时的脚本输出文件 config
03.生产时的样式输出文件 config
04.生产时的图片输出文件 config
05.生产时的字体输出文件 config
研发环境时，如果直接运行npm run dev:webpack4命令还是会输出文件的，但研发时不用它，用webpack-dev-server建简单的服务器或使用express+wenpack-dev-middware建立复杂的服务器。
生产环境时，由于输出文件到磁盘，多次输出后，构建目录可能会遗留之前的构建文件，因此在构建之前，先把之前的构建目录内容进行清除。此处使用clean-webpack-plugin插件。
研发环境时，使用css-loader等加载器加载css文件。
生产环境时，使用css-loader等加载器加载css文件。
研发环境时，用style-loader加载器把css文件注入的html中（行内样式）。config
生产环境时，使用外部样式，移除style-loader加载器。config
生产环境时，从html中把样式提取到css文件中。此处使用mini-css-extract-plugin插件对样式文件进行提取，并且使用该插件的加载器对提取的样式文件进行加载，以便后续实现压缩功能config。样式文件提取后保存在style.css文件中config。
生产环境时，对提取的样式文件进行压缩。此处使用optimize-css-assets-webpack-plugin插件进行。
对以png,jpe,jpeg,gif,svg为后缀的图片文件，使用url-loader加载器进行加载。如果图片大小小于8kb，注入到html的style标签内或css样式文件中；如果大于8kb，提取到工程的img目录，并以[name]_[hash:7].[ext]为文件名。
对以woff2,eot,ttf,otf为后缀的字体文件，使用url-loader加载器进行加载，如果字体大小小于1M，注入到html的style标签内或css样式文件中；如果大于1M，提取到工程的fonts目录，并以[name]_[hash:7].[ext]为文件名。
对以.less结尾的文件先用less-loader加载器加载，并经less类库处理成css。 config
对以.scss或sass结尾的文件先用sass-loader加载器加载，并经node-sass类库处理成css。config
对以.css文件，先使用postcss-loader加载器加载，使用postcss类库处理后，再进行其他处理config。使用postcss处理时，使用autoprefixer类库作为postcss的插件使用，实现自动前缀config。autoprefixer类库根据.browserslistrc文件中指定要兼容的浏览器种类和版本进行前缀处理(./.browserslistrc#L9-#L14)。
对于.less结尾的文件和.scss或sass结尾的文件，先经过各自的预处理器加载器加载，再用postcss-loader加载器加载，再进行其他处理。
注：一般用了postcss编写代码以后，less和sass/scss这些就可以舍弃了。postcss是趋势。
01.本项目的示例样式由于使用了这些特性user-select-none,transforms2d,css-boxshadow,css-textshadow，所以示例只能支持这些浏览器:
 IE / Edge |
 Firefox |
 Chrome |
 iOS Safari |
 Opera |
|---|---|---|---|---|
| IE10, IE11, Edge | >=3 | >=4 | >=4 | >=15 |
02.支持全球85.13%的用户
较简单的
使用webpack-dev-server实现。此处通过向webpack配置的devServer字段设置一些相应的选项实现。
较复杂的
使用express+webpack-dev-middleware+webpack-hot-middleware实现。
实现内容监控:通过nodejs接口使用webpack，获得compiler；再将compiler传给webpack-dev-middleware，创建一个express的中间件devMiddleware;express通过use使用该中间件。这是这几个东东的组合。
实现页面重载:通过nodejs接口使用webpack，获得compiler；再将compiler传给webpack-hot-middleware，创建一个express的中间件hotMiddleware;express通过use使用该中间件（实现这是这几个东东的组合）。实现好这几个组合之后，还需要做两件事，其一是在webpack的配置文件中，对配置的entry的每个chunk前面加一个dev-client.js文件，这个文件作用是————接送服务器发送过来的推送，当服务器发送过来通知说要重新载入页面时，重新载入页面；第二件事是在当文件有改变时，服务端推送消息给客户端。这里通过在dev-server.js中引入page-reload.js，把compiler和hotMiddleware传给page-reload，让它做这件事，这个文件实现是————借助hotMiddleware的publish接口给客户端发送重载页面消息。
注：这里只谈一些重要的！
让webpack支持处理es6+写法的脚本。通过对以.js或es6或msj结尾的脚本文件让babel-loader加载器加载。使用babel 7。
若想知道是怎么建的请点击这里