webpack.config.js的代码，亲测能正常运行。—

webpack.config.js的代码，亲测能正常运行。——20170406

来源：4-4 处理项目中的 css

aSuncat

2017-04-06 21:51

var htmlWebpackPlugin=require('html-webpack-plugin');
var webpack=require('webpack');
var path=require('path');
module.exports={
    context:__dirname,
    entry:'./src/app.js',
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'js/[name].bundle.js'
    },
    module:{
      rules:[
          {
              test:/\.js$/,
              loader:'babel-loader',
              exclude:path.resolve(__dirname,'/node_modules/'),
              include:path.resolve(__dirname,'/src/'),
              query:{
                  presets:['latest']
              }
          },
          {
              test:/\.css$/,
              use:[
                  {
                      loader:'style-loader'
                  },
                  {
                      loader:'css-loader',
                      options:{
                          importLoaders:1
                      }
                  },
                  {
                      loader:'postcss-loader'
                  }
              ]
          }
      ]
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:'body'
        }),
        new webpack.LoaderOptionsPlugin({
            options:{
                postcss:function(){
                    return [
                        require('autoprefixer')({
                            broswers:['last 5 versions']
                        })
                    ]
                }
            }
        })
    ]
};

写回答关注

6回答

慕粉0057303747

2017-04-08 16:50:29

已采纳

可以运行，试过了，谢谢

0 0
daguaishou

2017-06-29 14:35:21

在这样写才不会报错，plug不用谢就可以了。
{
test:/\.css$/,
//loader:'style-loader!css-loader!postcss-loader' //添加对样式表的处理
use:[
{
loader:'style-loader'
},
{
loader:'css-loader',
options:{
importLoaders:1
}
},
{
loader:'postcss-loader',
options: { // 如果没有options这个选项将会报错 No PostCSS Config found
plugins: (loader) => [
require('postcss-import')({root: loader.resourcePath}),
require('autoprefixer')(), //CSS浏览器兼容
require('cssnano')() //压缩css
]
}
}
]
},

2 0

慕仔3155...

感谢能用了

2017-09-01 16:00:12

共 2 条回复 >
若兮

2017-05-18 20:43:00

改为这个就可以了，自己测试过的
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader'
}, {
loader: 'postcss-loader',
options: {
plugins() {
return [
require('autoprefixer')({
browsers: [
'>1%',
'last 2 versions',
'Firefox ESR',
'not ie < 9'
]
})
]
}
}
}
]
})
},

2 1

qq_安静先...

嗯这个有效同学们如果格式报错把plugins(){}改为plugins:function(){}

2017-11-12 23:32:09

共 2 条回复 >
VIABO

2017-05-12 11:26:11

我也遇到这个坑，看了文档，除了楼主这种解决方式还有两种应该可以，一种是可以在同目录下增加一个postcss.config.js去设置组件，具体设置参考https://www.npmjs.com/package/postcss-loader
还有一种比较简单的可以直接在module设置，如下：
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
{
loader:"postcss-loader",
options:{
plugins:[
require('autoprefixer')({
browsers:['last 5 versions']
})
]
}
}
]
}

3 0

土豆马铃薯呀

还需要配置postcss-import

2017-06-05 15:29:04

共 3 条回复 >
LN1108

2017-05-09 16:58:41

为什么我还是编译报错？还需要postcss.config.js吗？
ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib!./src/css/common.css
Module build failed: Error: No PostCSS Config found in: /Users/LN/project/webpack-demo
at Error (native)
at /Users/LN/project/webpack-demo/node_modules/postcss-load-config/index.js:51:26
@ ./src/css/common.css 4:14-135
@ ./src/app.js

2 0

Mr_Blu...

我也是报的这个错，麻烦问下只好到解决的办法了吗

2017-06-09 15:11:30

共 2 条回复 >
前端_清歌莫断肠

2017-04-19 23:39:17

new webpack.LoaderOptionsPlugin是干什么用的，官网API里没看到

1 0

慕函数647...

https://webpack.js.org/guides/migrating/#loaderoptionsplugin-context 官网在这里有提及这个接口

2017-04-25 21:44:33

共 1 条回复 >