打包样式资源

优质

小牛编辑

127浏览

2023-12-01

一、创建html文件、 css 文件或 less 文件

<!-- 文件路径 ./src/index.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>webpack 学习</title>
</head>
<body>
    <h1 id="title">hello webpack</h1>
</body>
</html>

/* 路径： ./src/index.css */

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: Dpink;
}

// 路径： ./src/index.less

#title{
    color: #fff;
}

二、引入 css 文件或 less 文件

在 index.js 文件中引入 css 文件

// index. js: webpack入口起点文件
// 路径： ./src/index.js


// 引入样式资源
import ../index.css';
import ../index.less';

//……

三、配置 webpack配置文件

// webpack.config.js webpack的配置文件 
// 作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
// loader: 1.下载 2.使用(配置loader)
// plugins: 1.下载2. 引入 3.使用

// 路径： ./webpack.config.js


// resolve用来拼接绝对路径的方法
const { resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
        // webpack配置
        // 入口起点文件
        entry: './src/index.js',
        // 输出
        output: {
            //输出文件名
            filename: 'built.js',
            //输出路径
            //__dirname nodejs的变量,代表当前文件的目录绝对路径
            path: resolve(__dirname, 'build')
        },
        // loader的配置
        module: {
            rules: [
                //打包 css 文件的详细loader配置
                {
                    //匹配哪些文件
                    test: /\.css$/,
                    //使用哪些loader进行处理
                    use: [
                        // use数组中loader执行顺序:从右到左,从下到上依次执行
                        //创建style标签,将js中的样式资源插入进行,添加到head中生效
                        'style-loader',
                        //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                        'css-loader'
                    ]
                },
                //打包less 文件的详细loader配置
                {
                    //匹配哪些文件
                    test: /\.less$/,
                    //使用哪些loader进行处理
                    use: [
                        // use数组中loader执行顺序:从右到左,从下到上依次执行
                        //创建style标签,将js中的样式资源插入进行,添加到head中生效
                        'style-loader',
                        //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                        'css-loader',
                        //将less文件编译成css文件
                        //需要下载less-loader和less
                        'less-loader'
                    ]
                }
            ]
        },
        // plugins的配置
        plugins: [
            //详细的plugins配置
            //html-webpack-plugin
            //功能:默认公创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
            //需求:需要有结构的HTML文件
            new HtmlWebpackPlugin({
                //复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
                template: './src/index.html'
            })
        ],
        //模式  development  开发环境，production 生产环境
        mode: 'development',
        // mode: 'production'
    }

四、打包 css 文件的核心配置

// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js

//……

// loader的配置
    module: {
        rules: [
            //打包 css 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },
        ]
    },

//……

五、打包 less 文件的核心配置

// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js

//……

// loader的配置
    module: {
        rules: [
            //打包less 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less-loader和less
                    'less-loader'
                ]
            }
        ]
    },

//……

六、安装对应 loader

# 安装 style-loader和css-loader
> npm i css-loader style-loader -D
# 安装 less-loader 和 less
> npm i less less-loader -D

七、运行

> webpack

结论：

1、打包css 文件样式资源主要使用 style-loader 和 css-loader。
2、打包less 文件样式资源主要使用 style-loader 、css-loader和 less-loader。
3、多个 loader 时执行顺序是从右往左，从下往上。
4、样式文件在处理后会以字符串的形式整合输出到 built.js文件当中。