关于webpack的版本导致的postcss-loader的问题

来源自问题

https://segmentfault.com/q/1010000006987956

!!!发现这解决方案还是不能用,估计是webpack又更新了一轮,请看看下下方的答案
某个版本webpack的解决方案的复制(亲测webpack v2.4.1是不能用的):

plugins: {
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: function () {
        return [precss, autoprefixer];
      },
      devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        colors: true, //终端中输出结果为彩色
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
      }
    }
  })
}

这是另外一个地方的答案范本,亲测可用

module:{
		loaders:[{
			test:/.js$/,
			loader:'babel-loader',
			exclude:path.resolve(__dirname,'/node_modules/'),
			include:path.resolve(__dirname,'/src/'),
			query:{
				presets:["es2015"]
			}
		},{
			test:/.css$/,
			use:[
			"style-loader",
			{
				loader:"css-loader",
				options:{importLoaders:1}
				// 上面这句话的意思为如果css中有import进来的文件也进行处理
			},
			{
				loader:"postcss-loader",
				options:{
					plugins:(loader)=>[require('autoprefixer')()]
				}
			}]
		}]
	},
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',
			template:'index.html',
			inject:'body'
		})
	]

如果是在webpack中的另一种语法中,那么要这样使用?
loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
这里的?是起一种传参的作用。

原文地址:https://www.cnblogs.com/can-i-do/p/7112009.html