styles-webpack-plugin

😘一个处理样式资源的webpack插件。

特性：支持.css .less .scss .sass .styl stylus .sss 样式文件处理，运行环境按需补丁(css前缀)、自动分包、代码压缩、生成gizp、开发环境缓存构建。

👉

安装获取

yarn add styles-webpack-plugin -D

npm install styles-webpack-plugin -D

pnpm install styles-webpack-plugin -D

使用方式

const StylesWebpackPlugin = require('styles-webpack-plugin')

module.exports = {
  plugins: [new StylesWebpackPlugin()]
}

const StylesWebpackPlugin = require('styles-webpack-plugin')

module.exports = {
  plugins: [
    new StylesWebpackPlugin({
      cssLoader: {
        modules: true
      }
    })
  ]
}

注意

项目默认使用postcss进行样式转码，见源码

默认使用的插件：

• postcss-import 处理css模块导入
• postcss-preset-env 构建目标环境，按需自动添加浏览器支持的样式前缀
• postcss-url 处理cssurl转换

配置项

具体配置项的数据类型见types.ts

• cacheDirectory 生成缓存目录。 生成环境默认不开启，开发环境默认: './node_modules/.cache/style'
• cssLoader css-loader配置 详见：https://github.com/webpack-contrib/css-loader
• gzip 脚本文件的gizp压缩。默认开启，详见：https://github.com/webpack-contrib/compression-webpack-plugin

按照postcssConfig配置要求，例如创建postcss.config.js文件，最终会和默认配置合并。

按照browserslist配置要求，例如创建.browserslistrc，最终采用browserslist的配置要求生成代码。