webpack二：webpack的五个核心概念、css/less样式的处理配置方法+打包、样式处理相关库安装

最新推荐文章于 2024-04-02 21:03:12 发布

深蓝冰河

最新推荐文章于 2024-04-02 21:03:12 发布

阅读量362

点赞数 1

分类专栏：前端 # webpack

本文链接：https://blog.csdn.net/u010132177/article/details/111406180

版权

前端同时被 2 个专栏收录

133 篇文章 13 订阅

订阅专栏

webpack

2 篇文章 0 订阅

订阅专栏

一、webpack 五个核心概念

1. Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2. Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3. Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)

4. Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。

5. Mode

模式(Mode)指示 webpack 使用相应模式的配置。

选项	描述	特点
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为development。启用：NamedChunksPlugin 和NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用： FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线运行的环境

二、css样式处理配置

1）编写配置文件: 根目录/webpack.config.js

const {resolve}=require('path') //node核心模块：处理路径问题

module.exports={
    entry:'./src/index.js', //入口
    output:{//打包输出路径及文件名
        filename:'main.js', //输出的文件名
        path:resolve(__dirname,'build') //输出路径：当前绝对路径/build/
    },  
    // loader的配置        
    module:{
        rules:[
            // 不同文件匹配不同loader处理
            {   //正则：匹配css结尾的文件
                test:/\.css$/,
                // 匹配后执行哪些loader
                use:[//use数组内运行顺序：右-左，下-上；  
                      // 创建 style 标签，将js 中的样式资源插入进行，添加到head 中生效
                      'style-loader',
                      // 将 css 文件变成 commonjs 模块加载js 中，里面内容是样式字符串
                      'css-loader',
                    ]
            }
        ]
    },
    plugins:[
    //插件详细配置
    ],
    mode:'development', //或 production
}

2）安装css-loader、style-loader库

因为webpack目录下有很多子项目wp1/wp2等等，为了节省资源，可把这些公用库放在webpack根目录下安装；
首先在webpack下打开cmd初始化一下：npm init，输入总项目名webpack，其它默认直接回车。
然后再运行如下命令：

cnpm i css-loader style-loader -D

3）在子项目webpack/webpack1目录下运行打包命令`webpack`即可按配置进行打包

完成之后，可看到webpack/webpack1/build/main.js，即是打包完成的文件，运行详情：

在这里插入图片描述

4）编写样式src/index.css

html,body{
backgound-color:pink;
}

5）引入样式src/index.js

import './index.css'

6）创建首页加载此js查看效果 webpack1/index.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 只需引入打包好的文件即可 -->
    <script src="./build/main.js"></script>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

7）在浏览器打开6步html文件，即可看到页面变成粉色，样式成功通过js加载，并可在页面源码看到style标签，及内部样式

在这里插入图片描述

三、less样式的处理配置

1）webpack总目录下安装less,less-loader库

cnpm i less less-loader -D

2）在webpack.config.js的moudel.rules下新建一个规则：

// loader的配置        
    module:{
        rules:[
            {
            略过css配置
            },
            {
                test:/\.less$/,//【1】匹配以.less结尾的文件
                use:[
                    'style-loader',
                    'css-loader',
                    //把less编译成css文件
                    //需要下载less、less-loader
                    'less-loader',
                ]
            }
        ]
    }