webpack入门第八节：使用less和sass

使用less和sass

安装：
npm i less-loader --save-dev

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

module.exports = {
    entry: './src/components/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js',
    },
    module: {
        rules: [
            {
                test: /.\js$/,
                loader: 'babel-loader',
                //loader src目录下的所有文件 resolve意思为把它解析为绝对路径
                include: path.resolve(__dirname, 'src'),
                //loader时不包括node_modules
                exclude: path.resolve(__dirname, 'node_modules')
            },
            {
                test:/.\css$/,
                // 请注意loader解析顺序是从右往左的
                loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
            },
            {
                test:/.\less$/,
                //可以把loader都去掉，还是要注意一下less是放在最后的，之前写过importLoaders就不需要在写了
                loader:'style!css?!postcss!less'
            }
        ]
    },
    //对5个版本的浏览器进行处理
    postcss:[
        require('autoprefixer')({
            broswers:['last 5 versions']
        })
    ],
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',//引用的H5模板
            inject: 'body'
        })
    ]
}

Sass的配置我就不写了，都是一样的