PostCSS这个插件就有点类似js的babel,babel是用来处理js的一些特性和兼容性的。PostCSS就是用来处理css的一些特性和兼容性的。比如补齐css的前缀等,支持一些css特性语法等。
安装 postcss-loader
cnpm i postcss-loader -D
项目结构
project
| .babelrc # babel-loader配置文件
| .editorconfig # 配置格式化插件
| package.json # 项目需要的依赖
| webpack.config.js # webpack配置文件
| postcss.config.js # postcss配置文件
|
+---public
| index.html # 用于打包生成 .html 文件的模板
|
---src
main.js # webpack的入口文件
style.sass # sass文件
依赖的模块(package.json)
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^0.11.3",
"postcss-loader": "^4.0.3",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
webpack 配置文件
// webpack.config.js
const webpack = require("webpack");
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: "./src/main.js",
mode: "development",
output: {
path: path.join(__dirname, "dist"),
filename: "app.[hash:16].js",
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
ignoreOrder: false,
}),
new htmlWebpackPlugin({
filename: "index.html",
template: "./public/index.html",
minify: {
collapseWhitespace: false,
},
inject: true,
}),
],
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000, // 配置端口
hot: true,
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: "babel-loader",
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader", //使用postcss
},
],
},
],
},
};
postCSS 参考: http://postcss.docschina.org/
postcss-loader 参考: https://webpack.docschina.org/loaders/postcss-loader/