初识webpack

最新推荐文章于 2023-12-25 15:09:01 发布

『半生浮名』

最新推荐文章于 2023-12-25 15:09:01 发布

阅读量531

点赞数 3

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/vain__hope/article/details/122196342

版权

一、webpack简介

1.1 webpack是什么

本质上，webpack是一个用于现代 JavaScript 应用程序的打包工具。当 webpack 处理程序时，它会在内部从或多个入口点构建一个依赖图（依赖图），然后将你项目中需要的每一个模块组合成一个或多个捆绑包，它们属于同一资源，用于展示你的内容。
简单来说，webpack就是一个js模块打包器，把所有依赖的文件生成一个图，打包成文件。

1.2 webpack五个核心概念

1. Entry

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

2. Output

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

3. Loader

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

4. Plugins

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

5. Mode

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

二、webpack 安装

2.1 创建文件

//打开cmd面板
cd / //切换至根目录
md mypack //创建项目
cd / mypack //进入项目

2.2 本地安装 webpack

npm install --save-dev webpack
npm install --save-dev webpack-cli

2.3 初始化项目

2.3.1 初始化文件

npm init -y //初始化项目
//初始化项目文件夹后 会创建一个 package.js 文件

2.3.2 创建src目录

2.3.3 src目录下创建 headers.js 文件

// 创建一个节点
var elem = document.createElement("div");
// 设置内容
 elem.innerHTML = "你好webpack";
 // 导出
 export default elem;

2.3.4 src目录下创建 index.js 文件

// 导入节点
import elem from './header.js';
// 插入到页面
document.body.appendChild(elem);

三、打包

3.1 JS打包

3.1.1 主目录下创建配置文件webpack.config.js

const path = require('path')
// 引入node的 path路径模块

module.exports={
    entry:'./src/index.js',
    // 指定文件的入口
    output:{
        filename:'main.js',
        // 定义文件名
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
    // 指定打包好的出口
}
// module.export node中导出模块的意思

3.1.2 命令行执行编译命令

配置项目的npm运行命令，修改package.json文件

"scripts": {
	  "build": "webpack",
	  }

运行npm命令执行打包

npm run build

3.1.3 在dist目录下创建文件index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="./main.js"></script>
	</body>
</html>

在浏览器中运行查看index.html

3.2 css 打包

3.2.1 安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
因此我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css。

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

3.2.2 修改webpack.config.js

在 webpack.config.js 增加以下配置

 module: {
	        rules: [  
	            {  
	                test: /\.css$/,    //打包规则应用到以css结尾的文件上
	                use: ['style-loader', 'css-loader']
	            }  
	        ]  
	    }

3.3.3 在src文件夹创建style.css

div{
	font-size: 30px;
	font-weight: 700;
   color: aqua;
   }

3.3.4 修改index.js

在 index.js 导入 style.css

// 导入css
import './style.css'

3.3.5 重新打包并运行index.html

重新执行命令打包并将index.html运行到浏览器，此时文字颜色与大小已按照 style.css 进行渲染。