![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
1,安装npm install --save-dev mini-css-extract-plugin
2,将style-loader替换成MiniCssExtractPlugin.loader (style.loader,支持HMR,但MiniCssExtractPlugin目前正在支持(还没))
3,安装npm install --save-dev optimize-css-assets-webpack-plugin (压缩输出的css文件)
4,安装npm install --save-dev terser-webpack-plugin (因为需要配置minimizer,所以默认的js压缩被覆盖,在旧版本中是使用的 UglifyjsWebpackPlugin来压缩的,但是在最新版本中更换成了TerserJSPlugin)
5,在optimization.minimizer注册OptimizeCSSAssetsPlugin与TerserJSPlugin,注意,当运行mode是development时minimizer并不运行,所以,不会压缩js和css
6,安装npm install css-hot-loader --save-dev (来支持MiniCssExtractPlugin的HMR功能)
7,将css-hot-loader配置于MiniCssExtractPlugin.loader前面,注意,生成的css命名,不能让根据内容的改变而改变,不然找不到变化的css文件,热更新无效,如[name].[hash].css,就会让热更新失效,建议为[name].css
文接上回，继续看 webpack 的插件：这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。
mini-css-extract-plugin作用： 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。
extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身，不过前者在 webpack4 算是废了。
安装依赖：
然后引入，配置提出 css 样式，重命名 css 文件。
其中上面的 rules 还可以修改变成这样：
打包出来的 index.css将会插入 index.html 里面的 head 标签里面。
现在如果使用下面的样式：
其中 transform: rotate(45deg) 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理，这个 loader 就叫 postcss-loader 。
安装依赖：
配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。
完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下：
打包之前的 css 样式为：
经过插件处理之后为：
如果你不想新建一个 post.config.js 文件的话可以这样配置：
处理的效果是完全和分开写一样的。
这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效，所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是对打包的 JS 进行压缩的。
安装依赖：
注意： 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode （模式）一定的是 生产模式（production） 。
简单配置就能压缩 css 和 JS 了。还是很有用的，压缩完成明显文件变小了。
友情提示：
mini-css-extract-plugin 在 webpack4 中代替 extract-text-webpack-plugin ，此插件是 将 CSS 样式提取到单独的文件 中。 它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。即通过 JS 文件中 import 进来的样式文件。它支持 CSS 和 SourceMaps 的按需加载。
是建立在新的 webpack v4 功能（模块类型）之上，并且需要在 webpack 4 版本才能工作。
相比 extract-text-webpack-plugin ：
基本配置如下（webpack.config.js）：
高级配置如下（既可以在开发中使用 HMR，也可以在生成版本的文件中提取样式）：
生产环境优化压缩（production）
缩小输出，要使用像 optimize-css-assets-webpack-plugin 这样的插件。 设置 optimization.minimizer 会覆盖 webpack 提供的默认值，因此确保要指定 JS minimalizer ：
将所有 CSS 样式提取到单个文件中，与 extract-text-webpack-plugin 类似，可以使用 optimization.splitChunks.cacheGroups 。
还可以根据 webpack 的 entry name 来提取CSS，这对你动态引入路由，却想依据 entry 保存打包的 CSS 的情况十分有用。这也解决了 ExtractTextPlugin 中 CSS 重复的问题。
特别注意 ：
