Webpack：使用Loader打包样式（上）

css-loader作用

会分析出几个css文件之间的关系，最终把若干CSS文件合并成一段CSS

style-loader

得到css-loader生成的CSS内容之后，style-loader会把这段内容挂载到页面的head部分 

---

webpack.config.js

const path = require('path'); //引入node核心模块

module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: { 
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                    //图片小于2KB,则打包成base64,否则像file-loader一样打包
                }
            }
        }, {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}

sass-loader

先安装 npm install sass-loader node-sass --save-dev

webpack处理loader是有先后顺序的，从下到上，从右到左

---

 webpack.config.js

const path = require('path'); //引入node核心模块

module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: { 
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                    //图片小于2KB,则打包成base64,否则像file-loader一样打包
                }
            }
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
            //如果颠倒以上顺序则会报错
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}

自动添加厂商前缀 postcss-loader

 安装 npm i -D postcss-loader

 创建配置文件 postcss.config.js

安装插件 autoprefixer   npm install autoprefixer -D

---

webpack.config.js

const path = require('path'); //引入node核心模块

module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: { 
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                    //图片小于2KB,则打包成base64,否则像file-loader一样打包
                }
            }
        }, {
            test: /\.scss$/,
            use: [
                'style-loader', 
                'css-loader', 
                'sass-loader',
                'postcss-loader'
            ]
            //如果颠倒以上顺序则会报错
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}

packcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}