webpack 浅析一

最新推荐文章于 2023-09-27 17:00:32 发布

想喝橙汁儿

最新推荐文章于 2023-09-27 17:00:32 发布

阅读量1.1k

点赞数

分类专栏： webpack 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108745798

版权

webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概念

本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

安装

确保安装了nodejs

项目文件环境

cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立

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

本地安装

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

对于大多数项目，我们建议本地安装

准备文件

-- dist 文件生成目录
---- index.html 

-- index.js 主入口文件
-- header.js 需要被index引入的文件

#  index.html
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>第一个webpack页面</title>
</head>
<body>
 <script src="main.js"></script>   
</body>
</html>
<!--打包好的js名称默认是main.js-->


#  index.js
import {header} from './header.js'
document.body.append(header);


#  header.js
var header =document.createElement("div");
header.innerHTML="你好webpack from header";
export {header};

执行命令打开index.html

npx webpack index.js
// 在你的项目目录执行 这里的名称是 mypack

然后打开你的dist/index.html 查看网页文件
同时你会发现在 dist目录多个main.js这个打包生成好的js文件

使用配置文件

在项目目录新建一个webpack.config.js webpack默认配置文件

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

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

# 以下为纯净版本
const path = require('path')
module.exports={
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist',
    }
}

执行命令npx webpack实现打包

想喝橙汁儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 浅析一

概念本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。安装确保安装了nodejs项目文件环境cd mypack// 进入你的项目目录 mypack目录可以随意自己建立npm init // 初始化项目文件夹会创建一个packa
复制链接

扫一扫