webpack配置postcss-loader無效
文檔配置如下:
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index/index.js',
demo: './src/demo/demo.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]-[hash].js',
},
plugins: [
new webpack.BannerPlugin('版權所有,翻版必究'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'index.html',
filename: 'index.html',
template: './src/index/index.html',
inject: 'body',
chunks: ['index']
}),
new HtmlWebpackPlugin({
title: 'demo.html',
filename: 'demo.html',
template: './src/demo/demo.html',
inject: 'body',
chunks: ['demo']
}),
],
module: {
rules: [{
test: /\.(css|less)$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}, {
loader: "postcss-loader"
}]
}]
},
};
package.json
{
"name": "multipage",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0",
"less": "^3.11.1",
"less-loader": "^6.1.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"jquery": "^3.5.1"
},
// 這裏配置autoprefixer結合package.json中的browserlist這樣就成功了
"browserslist": [
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}
親測有效 ^_^