webpack 学习4 使用loader 以及常用的一些loader

webpack本身只支持处理JavaScript，其他的文件，如css img less是不识别的，所以才会有loader这个东西，它就是可以使webpack能够处理其他非js文件的拓展程序

首先我们在入口文件中引入css文件，我这里是index.js

import "./style.css"

然后下载

npm i style-loader -s -d
npm i css-loader -s -d

为什么要使用style-loader 先介绍以下这两个的用处

style-loader：使用<style>将css-loader内部样式注入到我们的HTML页面

 css-loader: 加载.css文件

然后在webpack.config中配置

const path = require("path");//这个是node.js自带的路径模块 可以有效的防止不同机器上路劲出现差异问题
 
module.exports = {
    mode: 'production',
    entry: {
        app: __dirname + '/src/index.js'
    },
    output: {
        path: __dirname + '/build',//指定输出文件 的地址
        filename: "./js/[name].js",//以入口文件的key值作为输入文件名 列入entry中是{app:"./src/index.js"} 那么对应的输出文件就是 app.js,这个只能是在entry参数为object时使用
    },
    module: {//模块
        rules: [//规则
            // {
            //     test: /\.css$/,//正则表达式，当匹配到.css结尾的文件时。使用以下loader
            //     use: [
            //         'style-loader',//再使用 style-loader 顺序从下往上
            //         'css-loader'//先使用 css-lloader
            //     ]
            // },
            //也可以配置使用 推荐
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules:true,//开启css模块化
                        }
                    }
                ]
            }
        ]
    }
 
}

loader的基本使用就是这样。这样打包之后，发现所有的css样式，都添加到了html页面的<style>标签里面，这样在开发模式下是ok，但是生产模式下就不友好了，我们是不是可以将css提取出来放在外部文件中呢，答案是当然的。使用插件就可以，下一章，会有详细的记录。

常用的loader有

图片处理

file-loader

url-loader

npm i file-loader -s -d
npm i url-loader -s -d

在配置文件中配置

const path = require("path");//这个是node.js自带的路径模块 可以有效的防止不同机器上路劲出现差异问题
const webpack = require("webpack");
module.exports = {
    mode: 'production',
    entry: {
        app: __dirname + '/src/index.js'
    },
    output: {
        path: __dirname + '/build',//指定输出文件 的地址
        filename: "./js/[name].js",//以入口文件的key值作为输入文件名 列入entry中是{app:"./src/index.js"} 那么对应的输出文件就是 app.js,这个只能是在entry参数为object时使用
    },
    module: {//模块
        rules: [//规则
            {
                test: /\.css$/,//正则表达式，当匹配到.css结尾的文件时。使用以下loader
                use: [
                    'style-loader',//再使用 style-loader 顺序从下往上
                    'css-loader'//先使用 css-lloader
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[hash].[ext]',//定义打包后的图片文件名
                            outputPath: "/img2",//定义打包后的图片放在那个目录，默认是/dist下（这里的dist是默认的输入地址，具体由output中的path指定）
                            publicPath: "./img",//在编写css代码的时候你使用的是background: url('./src/img0.png') 那么在打包之后输出的css代码就是background: url('builde_img.png')，而你输入的
                            //文件在img/builde_img_png下，这样肯定是找不到的，所以要给它配置一个发布地址，如例子，在打包后的输出的css文件中就是background: url('./img/builde_img.png')
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",//url-loader其实和file-loader一样都是又来处理图片等文件的loader，不过url-loader有一个功能，就是可以将指定的小的图片，
                        //转化base64，而大于这个大小的图片，则有file-loader处理，所以url-loader依赖与file-loader，经常的是将两个组合使用，注意使用url-loader的时候，
                        // 不要也不需要在rules中配置file-loader,否则会出现冲突导致转化失败
                        options: {
                            limit: 300000,//最小3k的图片，将转化成base64
                        }
                    }
                ]
            }
        ]
    }
}

以上就是常用loader使用的一个例子，常用loader还有很多，像是处理less的less-loader，html的html-loader等，使用方法都是大同小异，只是optins不同罢了，详情可以去webpack-loader去了解，本章不在叙述，下一章，记录webpack-plugin的使用