webpack4-的样式处理-lesspostcss

less、postcss

1. 需要安装的依赖包

   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 内。

2. 配置

   默认会将 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',
   })

3. 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 声明
4. Less 是预处理，而 PostCSS 是后处理，基本支持 less 等预处理器的功能，自动添加浏览器厂商前缀向前兼容，允许书写下一代 css 语法，可以在编译时去除冗余的 css 代码，PostCSS 声称比预处理器快 3-30 倍， 因为 PostCSS，可能我们要放弃 less/sass/stylus 了 。