下载并配置postcss-pxtorem

好的，下面是具体的步骤：

1. 首先，需要在你的项目中安装 `postcss-pxtorem` 插件。可以使用 npm 在命令行中运行以下命令：

npm install postcss-pxtorem --save-dev

2. 安装完成后，在项目根目录下创建一个 `postcss.config.js` 文件，并添加以下内容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*']
    }
  }
}

这里的配置意思是将所有的 `px` 单位转化为 `rem` 单位，其中 `rootValue` 表示 `1rem` 的大小，这里设置为 `16px`。而 `propList` 表示需要进行转换的属性，这里设置为 `['*']` 表示所有属性都要进行转换。

3. 接下来，在你的 `webpack.config.js` 中添加以下代码：

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

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

这里的配置意思是在 `postcss-loader` 中引入 `autoprefixer` 和 `postcss-pxtorem` 插件，将 `css` 文件中的 `px` 单位转换成 `rem` 单位。

4. 最后，在你的 `css` 文件中，使用 `rem` 单位代替 `px` 单位即可，例如：

/* 在设计稿中，元素宽度为 100px */
.example {
  width: 6.25rem; /* 100 / 16 = 6.25 */
}

这样就配置完成了，现在你的项目中所有的 `px` 单位都将会自动转换为 `rem` 单位。