webpack4配置vue项目----4.加载css, scss

这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

安装css-loader，sass-loader，style-loader

npm install --save-dev css-loader sass-loader sytly-loader

webpack.config.js配置

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            
            use: ['style-loader', 'css-loader', 'sass-loader'], 
        }]
    }
};

此时样式被打包进脚本中，在浏览器中执行时，会将样式注入到页面的head中

将样式抽离成css文件

安装mini-css-extract-plugin插件

npm install --save-dev mini-css-extract-plugin

修改webpack.config.js的内容

onst path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
   optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        }
    },
    module: {
        rules: [ {
            test: /\.css$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV=== 'production'? MiniCssExtractPlugin.loader:'style-loader',  'css-loader']
        }, {
            test: /\.scss$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV=== 'production'? MiniCssExtractPlugin.loader:'style-loader',  'css-loader',  'sass-loader']
        }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name]-[hash].css",//所有抽离出的样式文件，放进dist下的css目录
            //chunkFilename: "css/[name]-[hash].css"
        }),
    ],
};