• webpack打包基础

    文章目录

    一、目的

    把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的输出内容
      打包编译效果
  • 相关阅读:
    2022-08-26 第六小组 瞒春 学习笔记
    正则表达式常见的应用场景
    前端面试题目小结 之一（精选10题）
    图书管理系统代码实现
    FPGA学习之状态机
    SpringBoot的初步认识
    [ARM 汇编]进阶篇—存储访问指令—2.3.3 栈操作指令
    【操作与配置】WSL配置LINUX
    理解virt、res、shr之间的关系（linux系统篇）
    dubbo学习（一）dubbo简介与原理
  • 原文地址：https://blog.csdn.net/hehe_soft_engineer/article/details/126886327