                        课程
                    
                        /前端开发
                        
                            /前端工具
                        
                        /webpack深入与实战

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

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']
                        })
                    ]
                }
            }
        })
    ]
};

aSuncat

2017-04-06

源自：webpack深入与实战 4-4

关注问题我要回答

3919

操作

收起

6 回答

慕粉0057303747 回答被采纳 +3 积分
2017-04-08

可以运行，试过了，谢谢

0 回复有任何疑惑可以回复我~

收起回答

daguaishou
2017-06-29

在这样写才不会报错，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

]

}

]

0 回复有任何疑惑可以回复我~

收起回答

韩鑫

亲测，此法无效

2017-06-29 回复有任何疑惑可以回复我~

慕仔3155523

感谢能用了

2017-09-01 回复有任何疑惑可以回复我~

若兮
2017-05-18

改为这个就可以了，自己测试过的

{
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'
]
})
]
}
}
}
]
})
},

1 回复有任何疑惑可以回复我~

收起回答

Sccong

这个方法有效

2017-07-01 回复有任何疑惑可以回复我~

qq_安静先生_03717455

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

2017-11-12 回复有任何疑惑可以回复我~

VIABO
2017-05-12

我也遇到这个坑，看了文档，除了楼主这种解决方式还有两种应该可以，一种是可以在同目录下增加一个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']
})
]
}
}
]
}