webpck处理css预处理文件less，sass等

1、首先安装style-loader css-loader

npm i style-loader css-loader --save-dev

配置文件：

    test:/\.css$/,
    loader:'style-loader!css-loader' 

需要在样式中设置现在浏览器不是很支持的属性，比如flex，这是需要加浏览器前缀，此时用到postcss-loader,先安装

npm i  postcss-loader --save-dev

通过配置options来设置插件，记得安装。

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path')

module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            // exclude:__dirname+'node_modules',//不对这个进行babel转换，这里边已经打包好，这样能减少打包时间
            // include:__dirname+'src',
            exclude: path.resolve(__dirname, 'node_modules'),
            include: path.resolve(__dirname, 'src'),
            query: { //若在package.json中定义了这个presets，则这边可以删掉
                presets: ['latest']
            }
        }],
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } }, //1这个number指的是在css-loader之后引用几个loader来处理import进来的文件
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('postcss-import')(),
                                require('autoprefixer')({//浏览器前缀
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }
                    }
                ]
            },
            {
                test:/\.less$/,//在前边css匹配中设置了importLoaders后，在less匹配时不用在配置
                use:[
                'style-loader',
                'css-loader',
                {loader:'postcss-loader',options:{
                    plugins: [
                                require('autoprefixer')({//浏览器前缀
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }},
                'less-loader'
                ]
            },
            {
                test:/\.scss$/,//在前边css匹配中设置了importLoaders后，在less匹配时不用在配置
                use:[
                'style-loader',
                'css-loader',
                {loader:'postcss-loader',options:{
                    plugins: [
                                require('autoprefixer')({//浏览器前缀
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }},
                'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body',
            title: 'this is a complete webpack demo'
        })
    ]
}