webpack入门第七节：处理项目中的css

处理项目中的css

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:'style-loader!css-loader'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',//引用的H5模板
            inject: 'body'
        })
    ]
}

这里讲一个npm install postcss-loader --save-dev

什么时候需要用到呢？比如display:flex，只有兼容性比较差的css

npm install autoprefixer --save-dev这个是postcss里面的一个东西，下面写配置

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!postcss-loader'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',//引用的H5模板
            inject: 'body'
        })
    ]
}

postcss怎么配置呢？

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!postcss-loader'
            }
        ]
    },
    //对5个版本的浏览器进行处理
    postcss:[
        require('autoprefixer')({
            broswers:['last 5 versions']
        })
    ],
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',//引用的H5模板
            inject: 'body'
        })
    ]
}

有一点要小心就是@import进来的css文件不会进行postcss，那么怎么办呢？

loader:'style-loader!css-loader?importLoaders=1!postcss-loader'

什么意思呢？

指定几个数量的loader来处理import进来的资源