©2020-2024 ioDraw All rights reserved
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" ] }
亲测有效 ^_^