在 webpack 中,提取 CSS 成单独文件、处理 CSS 兼容性和压缩 CSS 都可以通过使用不同的插件来实现。下面是一个详细的操作教程:
- 安装依赖:在项目根目录下运行以下命令来安装必要的依赖:
npm install --save-dev style-loader css-loader mini-css-extract-plugin postcss-loader autoprefixer cssnano
- 配置 webpack:在项目根目录下找到 webpack.config.js 文件,并进行以下配置:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = {
// 其他配置项...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
],
optimization: {
minimizer: [
new cssnano({
preset: ['default', {
discardComments: {
removeAll: true,
},
}],
}),
],
},
};
- 创建 postcss.config.js:在项目根目录下创建 postcss.config.js 文件,并进行以下配置:
module.exports = {
plugins: [autoprefixer],
};
- 运行构建命令:运行以下命令来构建项目:
webpack
以上步骤完成后,webpack 将会提取 CSS 成为单独的文件,并且自动处理 CSS 的兼容性和压缩。
请注意,以上教程使用的是最新版本的 webpack(4.x 版本及以上),如果你使用的是旧版本的 webpack,部分配置可能会有所不同。