webpack配置postcss-loader无效

拼搏现实的明天。 2023-02-14 03:20 3阅读 0赞

# 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"
      ]
    }

亲测有效 ^\_^

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack配置postcss-loader无效

webpack配置postcss-loader无效文档配置如下: postcss.config.js module.exports = {

拼搏现实的明天。/ 2023年02月14日 03:20/ 0 赞/ 4 阅读

相关 pathrewrite不生效_webpack配置proxyTable时pathRewrite无效的解决方法

本人webpack版本3.6，webpack-dev-server版本2.9.1，本人按照网上写的版本折腾两天都没通，无意间自己试通了，猜测网上大部分都是照本宣科，没有自己实践

「爱情、让人受尽委屈。」/ 2023年01月08日 07:25/ 0 赞/ 429 阅读

相关 webpack简易配置

webpack基础配置文章查考 1、[https://blog.csdn.net/fengmin\_w/article/details/81984514][https_blo

小咪咪/ 2022年10月25日 04:46/ 0 赞/ 224 阅读

相关 webpack配置

1、初始化package.json文件 npm init -y 2、处理ES6语法安装：npm i babel-loader babel-core ba

淩亂°似流年/ 2022年06月13日 01:29/ 0 赞/ 243 阅读

相关 webpack配置

var path = require(‘path’); var MiniTextPlugin = require(‘mini-css-extract-plugin’);

快来打我*/ 2022年05月11日 09:30/ 0 赞/ 217 阅读

相关 webpack 安装后命令无效问题

webpack 安装后终端运行提示 '不是内部或外部命令，也不是可运行的程序或批处理文件。首先确定是否安装webpack npm install webpack -g

雨点打透心脏的1/2处/ 2022年04月18日 04:47/ 0 赞/ 488 阅读

相关 webpack学习（一）：初步配置webpack

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

女爷i/ 2022年04月06日 05:27/ 0 赞/ 282 阅读

相关学习webpack（二）之 webpack配置

简述 > 当我们在终端中使用webapck命令时，默认首先查找是否存在webpack.config.js文件，如果存在，就使用这个文件中的配置；如果不存在，就使用终端上你

我不是女神ヾ/ 2022年04月03日 14:20/ 0 赞/ 341 阅读

相关 webpack配置

1.新建文件夹 webpack-demo vscode 打开文件 -》打开控制台（只要进入文件目录中） 2.初始化webpack webpack init -

小灰灰/ 2021年08月27日 22:56/ 0 赞/ 448 阅读

相关 react-webpack配置

webpack.config.dev.js 'use strict'; const autoprefixer = require('autopref

Dear 丶/ 2021年07月26日 11:42/ 0 赞/ 505 阅读