【Node.js】三个Demo学会webpack打包

最新推荐文章于 2024-07-23 10:56:05 发布

samarua

最新推荐文章于 2024-07-23 10:56:05 发布

阅读量223

点赞数

分类专栏： # Node.js 文章标签： javascript nodejs

本文链接：https://blog.csdn.net/m0_46202073/article/details/115569611

版权

Node.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack用来做什么？

简单的说，可以将多个js、css…文件打包成一个js文件，引用了这个js文件就相当于引用了所有的被打包的文件。

在这里插入图片描述

webpack安装

首先，保证你已经安装好node.js，检查一下：

node -v

安装webpack与webpack脚手架：

npm install webpack -g
npm install webpack-cli -g

在使用webpack打包之前，先初始化一下当前目录，做好准备：

npm init -f

Demo1——将多个js文件打包成一个js文件

基本目录结构：

app
├── index.html		// 内部引入dist/bundle.js，用于测试打包效果
├── runoob1.js		// js文件
├── runoob2.js		// js文件
├── runoob3.js 		// js文件（主入口文件）
└── dist
    ├── bundle.js	// 尚未创建

代码编写：

index.html --------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src=".dist/bundle.js" charset="utf-8"></script>
</body>
</html>

runoob1.js --------------------------------------------------------------------------------

exports.info = function () {
    document.write("我是第一只Loli >_<");
}

runoob2.js --------------------------------------------------------------------------------

exports.info = function () {
    document.write("我是第二只Loli >_<");
}

runoob3.js --------------------------------------------------------------------------------

var runoob1 = require("./runoob1.js");
var runoob2 = require("./runoob2.js");

runoob1.info();
runoob2.info();

webpack打包：

webpack runoob3.js dist/bundle.js

理解：

runoob3做为主入口js文件，依赖了runoob1.js和runoob2.js。打包后，这三个js文件被压缩为了一个整体，index.html引入这个打包形成的dist/bundle.js文件即可。

其实，就算runoob1.js和runoob2.js之间也存在依赖关系，这种关系也会被打包。webpack可以对被打包文件之间的依赖关系进行静态分析，十分方便。

Demo2——将css文件也一起打包

基本目录结构：

app
├── index.html		// 内部引入dist/bundle.js，用于测试打包效果
├── runoob1.js		// js文件
├── runoob2.js		// js文件
├── runoob3.js 		// js文件（主入口文件）
├── style.css		// css文件
└── dist
    ├── bundle.js	// 尚未创建

引入loader模块：

npm install css-loader
npm install style-loader

代码编写：

index.html		同上，依旧引用尚未创建的dist/bundle.js
runoob1.js		同上
runoob2.js		同上

runoob3.js --------------------------------------------------------------------------------

require("!style-loader!css-loader!./style.css");	// 多加这一句
require("./runoob1.js").info();
require("./runoob2.js").info();

style.css ---------------------------------------------------------------------------------

body {
	background: pink;
}

webpack打包：

webpack runoob3.js dist/bundle.js

理解：

webpack本身是只能打包多个js文件的，想要打包css文件需要借助loader模块进行转化。

转化的原理非常简单，css-loader用于扫描css文件，style-loader把扫描的内容从外链式转化为行内式。最终把css文件“融合”进了js文件。

Demo3——使用webpack.config.js配置文件进行统一管理

以Demo2为例（Demo2非常完整），为其新建一个配置文件：

module.exports = {
    entry: "./runoob3.js",
    output: {
        path: __dirname,
        filename: "dist/bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};