webpack打包基础

文章目录

一、目的
二、项目结构
三、基本的打包过程
四、编写页面和JavaScript代码
五、打包所需的配置文件
六、效果

一、目的

把js代码按照自己的规则组织合并为一个或多个js文件
1

二、项目结构

项目结构

三、基本的打包过程

1.首先要安装了node环境,然后初始化
- npm init //产生package.json
2.在项目内安装webpack和webpack-cli
- npm install webpack --save-dev //把相关配置写入package.json和package-lock.json文件并下载文件到node_modules
- npm install webpack webpack-cli --save-dev //把相关配置写入package.json和package-lock.json文件并下载webpack-cli
3.设置打包配置文件webpack.dev.js
4.执行打包命令
- node_modules/.bin/webpack --config=conf/webpack.dev.js
- 将编译好的程序打包到build中
5.index.html引用打包好的程序进行页面加载

注：安装完webpack、webpack-cli的package.json中文件和内容都是自动生成的

四、编写页面和JavaScript代码

概述
- app.js和append.js为待编译打包的文件
- index.html中调用的main.js就是前面提到的两个js文件编译打包后的文件

index.html

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试Webpacktitle>
    head>
    <body>
        <div id="webpackdemo">div>
        <script src = "../build/main.js">script>
        
    body>
    html>
1
2
3
4
5
6
7
8
9
10
11
12

app.js

    console.log("编译了app.js");
    let divblock=document.getElementById("webpackdemo");
    divblock.innerHTML="Hello Webpack-使用dev.js配置文件";
1
2
3

append.js

    console.log("编译了append.js");
1

五、打包所需的配置文件

1.webpack.config.js/webpack.dev.js

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件
        entry: {//入口文件，从项目根目录指定，可以区分打包方式
            main:["./src/app","./src/append"]
        }, 
        output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../build"), //将js文件打包到dist/js的目录
            filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
        },
    }
1
2
3
4
5
6
7
8
9
10
11
12

2.有多种打包方式
- 多个js分别打包
- 几个js合并打包-上面的代码就是指定两个编译到main.js
- 所有js合并打包
3.打包方式具体可以参考一下这篇文章
https://blog.csdn.net/weixin_36185028/article/details/81117730
4.打包执行输出
5.注意
webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

六、效果

打开页面，查看使用编译后的main.js的输出内容

相关阅读:
Linux命令(96)之seq
山东涛雒镇万亩水稻国稻种芯·中国水稻节：日照迎来收割季
Docker-可视化管理工具总结-推荐使用Portainer
昨晚直播小鱼搞了个开源库之FishProtocol，目前已经两颗星
软件人和硬件人有啥区别？
Fabric.js 拖拽顶点修改多边形形状
会计凭证概述、原始凭证、原始凭证的种类、原始凭证的基本内容、原始凭证的填制要求、原始凭证的审核
运算放大器 —— 快速复苏笔记[贰]（应用篇)
单例模式学习
GJB 5000B-2021下载-见文章结尾

原文地址：https://blog.csdn.net/hehe_soft_engineer/article/details/126886327