webpack4-的样式处理-lesspostcss

jiezi

5 年前

需要安装的依赖包

yarn add less less-loader css-loader style-loader postcss-loader postcss-preset-env postcss-import cssnano postcss-safe-parser mini-css-extract-plugin -D

过去版本的 autoprefixer、postcss-cssnext 已内置在 postcss-preset-env 内。

配置

默认会将 css 一起打包到 js 里，借助 mini-css-extract-plugin 将 css 分离出来并自动在生成的 html 中 link 引入（过去版本中的 extract-text-webpack-plugin 已不推荐使用）。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

loader

{test: /\.(less|css)$/,
     use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
 }

 // 在启用 dev-server 时，mini-css-extract-plugin 插件不能使用 contenthash 给文件命名 => 所以本地起 dev-server 服务调试时，使用 style-loader
 // USE_HMR 是自定义的环境变量，意思是是否使用了热替换中间件
 const styleLoader = process.env.USE_HMR ? 'style-loader' : MiniCssExtractPlugin.loader

 // 通过其他合适的方式判断是否为本地调试环境也一样，自由选择。const styleLoader = process.env.BUILD_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader

 {test: /\.(less|css)$/,
   use: [styleLoader, 'css-loader', 'postcss-loader', 'less-loader'],
 },

plugin

// 单独使用 link 标签加载 css 并设置路径，相对于 output 配置中的 publickPath
new MiniCssExtractPlugin({filename: 'static/css/[name].[contenthash:7].css', // 注意这里使用的是 contenthash，否则任意的 js 改动，打包时都会导致 css 的文件名也跟着变动。chunkFilename: 'static/css/[name].[contenthash:7].css',
})

PostCSS 本身不会对你的 CSS 做任何事情, 你需要安装一些 plugins（postcss GitHub 文档）才能开始工作。
1. 在 package.json 同级目录，新建 postcss.config.js 文件:
```
module.exports = {
  // parser: 'sugarss', // 是一个以缩进为基础的语法，类似于 Sass 和 Stylus，https://github.com/postcss/sugarss
  plugins: {'postcss-import': {},
    'postcss-preset-env': {},
    'cssnano': {},
    'postcss-flexbugs-fixes': {},}
}
```
2. 常用的插件:
  - cssnano —— 会压缩你的 CSS 文件来确保在开发环境中下载量尽可能的小
3. 其它有用的插件:
  - postcss-pxtorem —— px 单位自动转换 rem
  - postcss-assets —— 插件用来处理图片和 SVG, 类似 url-load
  - postcss-sprites —— 自动合成雪碧图，提供了细致的配置方法、插件去自定义控制（看上去略复杂）
  - img-loader —— 自动压缩图片，参数控制压缩比率
  - postcss-font-magician —— 使用自定义字体时, 自动搞定 @font-face 声明
Less 是预处理，而 PostCSS 是后处理，基本支持 less 等预处理器的功能，自动添加浏览器厂商前缀向前兼容，允许书写下一代 css 语法，可以在编译时去除冗余的 css 代码，PostCSS 声称比预处理器快 3-30 倍， 因为 PostCSS，可能我们要放弃 less/sass/stylus 了 。

less、postcss