WebPack

最新推荐文章于 2023-07-05 21:59:17 发布

P_ning

最新推荐文章于 2023-07-05 21:59:17 发布

阅读量317

点赞数

分类专栏：大前端学习

本文链接：https://blog.csdn.net/p_ning/article/details/115432168

版权

大前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了Webpack的基本概念，包括其在前端资源管理和打包中的作用。通过一步步的教程，学习者将学会如何安装Webpack，配置JS和CSS的打包规则，以及使用Webpack监听文件变化并实时打包。重点讲解了Webpack处理JS和CSS的常用参数和Loader的安装与使用。

摘要由CSDN通过智能技术生成

一、简介

WebPack是一个前端资源加载/打包工具，它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。可以将多种静态资源 js、css、less 转换成一个静态文件，减少页面的请求。而且打包后还有一种天然的加密功能
在这里插入图片描述

二、安装

npm install webpack -g
#或
cnpm install webpack -g

在这里插入图片描述
安装后通过查看版本号判断是否安装成功

webpack -v

在这里插入图片描述

三、合并

1、JS打包

创建一个文件夹作为项目，并通过npm init -y来初始化
创建文件
创建src/common.js

exports.info = function(str){
    document.write(str);
}

创建src/utils.js

exports.add = function(a,b){
    return a+b;
}

创建src/main.js

const common = require("./common");
const utils = require("./utils");

common.info(utils.add(100,50));

配置WebPack的配置文件
在根目录新建webpack.config.js文件

//导入path模块(内置模块)
const path = require("path");
//定义JS打包规则
module.exports = {
    entry:"./src/main.js",//入口文件
    output:{
        path:path.resolve(__dirname,"./dist"),//输出位置，__dirname意思为当前根目录
        filename:"bundle.js"//合并的JS存放在dist/bundule.js文件下
    }
}

打包

webpack

在这里插入图片描述

检测是否打包成功
在根目录下创建一个test,.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>
<script src="./dist/bundle.js"></script>
</body>
</html>

在这里插入图片描述

常用参数

webpack -w
#w:监听，也就是实时监听代码，代码一变动就重新执行打包操作

2、CSS打包

安装对应的Loader
因为WebPack本身只能处理JavaScript模块，如果需要处理其他类型的文件就需要使用xxx-loader(也就是莫魁岸和资源的转换器)进行转换，安装css-loader(将CSS安装到JavaScript中去)和style-loader(让JavaScript认识CSS)
执行下面语句进行安装

npm install --save-dev style-loader css-loader

创建src/style.css文件

body{
	background:blue;
}

在src/main.js文件下添加一行require("./style.css")

require("./style.css")//打包css添加的
const common = require("./common");
const utils = require("./utils");

common.info(utils.add(100,50));

修改WebPack的配置文件
根目录下的webpack.config.js文件

//导入path模块(内置模块)
const path = require("path");
//定义JS打包规则
module.exports = {
    entry:"./src/main.js",//入口文件
    output:{
        path:path.resolve(__dirname,"./dist"),//输出位置，__dirname意思为当前根目录
        filename:"bundle.js"//合并的JS存放在dist/bundule.js文件下
    },
    //打包Css添加的东西
    module:{
		rules:[
			{
				test: /\.css$/,//打包规则应用到以css结尾的文件上
				use:['style-loader','css-loader']
			}
		]
	}
}