webpack基础三：样式资源的打包和其他基本配置

本文链接：https://blog.csdn.net/a13085759937/article/details/124646435

前置

1.安装html-webpack-plugin和安装less（本文中下面举例时使用了less）

在上文中创建的node项目下执行

npm install html-webpack-plugin less -D

2.编写html模板

在src中目录下创建一个html页面作为模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

一.编写自己的css/less/scss文件，在入口文件中引入

// a.css文件
*{
    color:red
}

// b.less文件
body{
    .a{
        color:red
    }
}

// index.js
import "./a.css"
import "./b.less"

二.编写配置文件（太多了，直接上代码）

const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'inline-source-map', // 快速找到代码报错的文件和行数（帮助我们bug定位）
    mode: 'development', // develpment | production ，生产模式下代码会进行压缩
    entry: './src/index.js', // 入口文件
    output: {
        publicPath: './', // 打包后每个模块的公共路径头
        filename: 'bundle.js', // 输出的核心js的文件名
        clean: true // 是否清空打上一次打包的数据
    },
    module: {
        rules: [
            {
                // 需要根据对应的loader名字进行安装
                // npm install xxx-loader -D
                // 根据正则匹配所有css文件，对齐进行修改
                test: /\.css$/,
                // 数组是从尾往头执行
                use: [
                    // 创建style标签，将js中的样式文件加载到style中，再放入head标签中
                    'style-loader',
                    // 将css文件编程commJs模块，加载到js中，以样式表的字符串形式存在
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编程css文件
                    // 需要安装 > npm install --save-dev less-loader less
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, "./src/index.html")
        })
    ],
    devServer: {
        hot: true,
        port: 8080,
        static: path.resolve(__dirname, "./dist")     // contentBase 修改成 static
    }
}

三. 配置解释

1. 为什么需要安装loader？

webpack只能识别js语言，别的语言需要loader支持，将其加载为js对面，才能给webpack进行处理
在使用less、sass等预处理语言时，需要先安装less/node-sass插件，随后才能支持对应loader的使用
use数组的loader的顺序需要注意，执行顺序为从尾到头（webpack的编译可能采用了深度优先原则）。如，我们要编译less文件，那先要将其转化为css，再将css转化为js字符串，最后才使用style-loader将他们加载中html模板中，所以顺序为
[ 'style-loader' , 'css-loader' , 'less-loader' ] 从右往左执行！
如果我们只是直接使用了css文件，那只需要将css文件加载中js中的样式表字符串，在使用style-loader加载到html中，所以用到亮哥loader
[ 'style-loader' , 'css-loader' ]

2.css-loader,style-loader,less-loader的用途

css-loader，将css文件加载在js中，以字符串形式存在
style-loader，将文件加载到style标签中，再放入html模板的head标签中
less-loader，将less文件转化为css文件