webpack中配置postcss

webpack中postcss的配置,
以下是我的webpack.config.js的代码,其中有一些关于postcss的配置,但是运行之后,并没有起作用,反而报错,错误提示在最后:

var htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
var postcss =require('postcss');

module.exports = {
    entry:'./src/app.js',
    output:{
        path:__dirname+"/dist",
        filename:'js/[name].bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:'/node_modules/',
                include:'/src/',
                use:[
                    {
                        loader:'babel-loader',
                        query:{
                            presets:['latest']
                        }
                    }
                ],
                //include:path.resolve(__dirname,'src'),
                //exclude:path.resolve(__dirname,'node_modules'),
              /*  query:{
                    presets:['latest']
                }*/
            },
            {
                test:/\.css$/,
                use:[
                   'style-loader',
                    'css-loader?{"importLoaders":1}',
                    'postcss-loader',
                ],
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            filname:'index.html',
            template:'index.html',
            inject:'body',

        }),
        new webpack.LoaderOptionsPlugin({
            options:{
                postcss:function () {
                    return[
                        require("autoprefixer")({
                            broswers:['last 5 versions']
                        })
                    ]
                }
            }
        })
    ]
}

clipboard.png

求解...
另外,我在百度的过程中,还看到postcss.config.js的文件,这个是跟webpack.config.js一样创建在根目录下的文件么,还是说为了配置postcss新建的文件?如果是新建的文件的话,应该放在哪个目录下呢?

阅读 6.9k
2 个回答

postcss.config.js 放到项目根目录,即与 webpack.config.js 同级。postcss 包的配置,也可以写在 webpack.config.js 里面

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题