webpack 浅析一

墨蓝 2022-12-10 01:12 200阅读 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>
    
    
    
    #  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实现打包