webpack深入了解——图片处理&分离css文件

1. 图片的处理

hello,老铁们，我又有问题了，刚刚试了一下，css中用到了背景图片，结果就报错了，难道webpack连图片也认不出来吗？没有错，的确认不出来😱，我们这时需要转化图片的loader，来帮我们处理图片的问题。这里主要用到url-loader和file-loader，注意url-loader中的部分功能需要用到file-loader，所以这两个模块都要下载下来。但是，用的时候use中只要写url-loader就可以了。

1. 废话不多说，先下载包

cnpm i url-loader file-loader -D

2. 然后，在webpack.config.js中添加规则，如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const Uglify = require('uglifyjs-webpack-plugin');
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
                // use:[
                //     {loader: 'style-loader'},
                //     {loader: 'css-loader'}
                // ]
            },
            {
                test: /\.(png|jpg|gif)$/, //匹配图片
                use: [
                    { loader: 'url-loader' }
                ]
            }
        ]
    },
    plugins: [
        new Uglify(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            hash: true,
            title: 'hello world',
            template: './src/index.html'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        open: true,
        hot: true
    }
}

3. 开启服务器，npm run dev，浏览器页面

image.png

最后说一句，其实，我不会玩LOL😜

我们右键审查元素，发现我们的背景图片变成了base64格式的了，这个有好处也有坏处，好处就是浏览器不用发请求了，直接可以读取，坏处就是如果图片太大，再转base64就尴尬了。有没有一个配置，可以让我们设置一个东西来控制它呢？ 有，😎，在我们设置的use属性中，有一个配置选项options，这个options中有个limit属性，这个属性就是干这活的，我们可以设置一个临界值，大于这个值的话得到的是路径，小于这个值的话就转成base64，哇~~~好牛逼😍

          {
                test: /\.(png|jpg|gif)$/,
                use: [
                    { 
                        loader: 'url-loader',
                        options: {
                            limit: 50000
                        }
                     }
                ]
            }

这里的50000表示的是50kb

image.png

而且，这个图片还进行了hash转化，不会重名😎

2. 分离css文件

我们上面的操作，使得css和js文件混杂在一起了，一个文件请求次数是少了，但是如果文件太大的话，也不是太好，那有没有什么办法把css分离出来呢？ 有，还是一个插件，mini-css-extract-plugin，这个插件支持webpack4.x，还有一个插件extract-text-webpack-plugin这个插件对webpack3.x的版本支持，对4.x的不支持了，所以我们就不看他了😘。

1. 首先，我们安装一下mini-css-extract-plugin这个插件：

cnpm i mini-css-extract-plugin -D

2. 然后，我们在webpack.config.js文件中，引入这个模块，文件如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ // 根据官方文档写的，注意'css-loader'的书写位置
                   {
                     loader: MiniCssExtractPlugin.loader,
                     options: {
                         publicPath:'../',
                        //  hmr: process.env.NODE_ENV === 'development'
                     },
                     
                   },
                   'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options:{
                            limit: 500000,
                        outputPath: 'images'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename:'index.html',
            hash: true,
            title:'你好，世界',
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({ // 定义打包好的文件的存放路径和文件名
            filename:'css/index.css'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        hot: true,
        open: true
    }
}

注意：css-loader的书写的位置😱

3. 命令行运行

image.png