webpack4 配置之 postcss-loader

postcss-loader是我们在做项目的时候大多数都会用到的loader之一，它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。

第一：依赖包

postcss-loader、autoprefixer、cssnano

第二：添加浏览器前缀

1.首先添加 browserslist，
方法一：在项目根目录添加 .browserslistrc文件

# last 2 versions
# > 1%

方法二：在package.json文件中添加 browserslist

"browserslist": [
    "> 1%",
    "last 2 versions"
]

2.配置autoprefixer
方法一：在根目录创建 postcss.config.js：

module.exports = {
  plugins: [
    require("autoprefixer")({
      //兼容浏览器的最近两个版本
      //兼容市场占有率大于1%的浏览器（世界的）
      overrideBrowserslist: ["last 2 versions", ">1%"],
    }),
  ],
};

方法二：在 webpack.config.js 中配置：

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('autoprefixer')
        ]
      }
    }
  ]
}

第三：生产模式-压缩CSS

方法一：postcss.config.js（推荐）

mode为process.env.NODE_ENV，用来判断是开发模式还是生产模式。

module.exports = ({ mode }) => ({
  plugins: [
       require('autoprefixer'),
       mode === 'production' ? require('cssnano') : null
    ]
})

方法二：webpack.config.js 配置

const mode = process.env.NODE_ENV === 'production'; 

module.exports = {
  module: {
    rules:[
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: mode? [require('autoprefixer'), require('cssnano')]:[require('autoprefixer')]
            }
          }
        ],
      }
    ]
  }
};

第四：开发模式下生成 sourcemap

1.使用 style-loader：

const mode = process.env.NODE_ENV === 'development'; // 开发模式

module.exports = {
  module: {
    rules:[
      {
        test: /\.less$/,
        use:  [
          'style-loader',
          { loader: 'css-loader', options: { sourceMap: mode }},
          { loader: 'postcss-loader', options: { sourceMap: mode }},
          { loader: 'less-loader', options: { sourceMap: mode }}
        ]
      },
    ]
  }
};

2.使用MiniCssExtractPlugin

sourceMap需要配置成“inline”，不然调试时仍旧无法定位到.less 源码，只能定位到编译后的 CSS 文件。

const mode = process.env.NODE_ENV === 'development'; // 开发模式

module.exports = {
  module: {
    rules:[
      {
        test: /\.less$/,
        use:  [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // only enable hot in development
              hmr: mode,
              // if hmr does not work, this is a forceful method.
              reloadAll: true,
            },
          },
          { loader: 'css-loader', options: { sourceMap: mode }},
          { loader: 'postcss-loader', options: { sourceMap: mode ? 'inline' : false }}, 
          { loader: 'less-loader', options: { sourceMap: mode }}
        ]
      },
    ]
  }
};