webpack打包基础

最新推荐文章于 2023-06-24 18:28:40 发布

Nelson_hehe

最新推荐文章于 2023-06-24 18:28:40 发布

阅读量558

点赞数 1

分类专栏： # JavaScript 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/hehe_soft_engineer/article/details/126886327

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Webpack进行JavaScript代码的打包，包括安装Node环境，初始化项目，安装Webpack及CLI，设置打包配置文件，编写页面和JavaScript代码，以及配置文件的详细解释。通过实例展示了Webpack的基本操作，如多文件合并打包，最后展示了打包后的运行效果。

摘要由CSDN通过智能技术生成

一、目的

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

二、项目结构

项目结构

三、基本的打包过程

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>测试Webpack</title>
    </head>
    <body>
        <div id="webpackdemo"></div>
        <script src = "../build/main.js"></script>
        
    </body>
    </html>

app.js

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

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

五、打包所需的配置文件

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文件会分别按照入口文件配置的属性来命名
        },
    }

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