介绍最简单的webpack4入门示例

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

目前webpack应该是前端使用的很多打包工具，那么对于之前没有接触过这一块的人该怎么办呢？答案很明显，看资料，查文件，自己琢磨，自己敲跑；

Webpack是最流行的前端资源模块化管理和打包工具。它可以根据依赖关系和规则，将许多松散的模块封装到满足生产环境部署的前端资源中。它还可以对按需加载的模块进行代码划分，然后在实际需要时异步加载。

与咕噜和大口相比，网络包有什么特点

gull/Grunt是一个可以优化前端开发流程的工具，而WebPack是一个模块化的解决方案。但是，Webpack的优势使得Webpack取代了glow/Grunt类的工具。

Grunt和glugh通过指定编译、组合和压缩配置文件中的一些文件的具体步骤来工作。

webpack的工作方式是：把你的项目作为一个整体，通过一个给定的主文件(比如index.js)，Webpack会从这个文件中找到你项目的所有依赖文件，用加载器进行处理，最后打包成浏览器可以识别的JavaScript文件。

然后，这里我会用一个基本的例子把这个过程运行到一边，包括过程中会遇到什么问题，如何解决，也会一一提供；

第一步：

我们需要安装npm，只要你有NodeJS运行环境，NPM肯定会存在；这里将不描述该块

第二步：

接下来，我们将选择在项目目录中全部安装和操作，而不是选择全局安装；

在计算机的任何磁盘上创建一个新的项目文件夹，例如webpackdemo

接下来，我们通过cmd进入这个项目文件夹，输入并执行npm init，按enter，然后初始化：

接下来，对于包名等配置项，我们完全选择直接进入，进行到底！

在这一点上，是可以的！

此时，我们的项目文件夹中还有一个文件：package.json

第三步：

既然我们想使用webpack进行打包，我们就要安装webpack。一开始我们说会在项目文件夹里做，不会做全局安装；然后输入NPM安装-保存-开发网络包，并按回车键安装：

此时，我们的项目文件夹已经有了另一个文件夹和一个json文件：

第四步：

我们现在可以开始写自己的项目了，所以我就按照大牛们平时分享的例子来写。首先，在项目文件夹下，创建两个新文件加上app和public；

编写test.js和main.js在app文件夹中；在公共文件夹中写一个index.html；

从别人的例子中学习：

index.html

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' title webpack demo/title/head body div id=' root '/div brbr！-导入打包文件-script src=' http : bundle . js '/script/body/html test . js。

！-写js，创建div元素，写一个句子，导出模块test . js-brmodule . exports=function(){ var test=document . create element(' div ')；test.textContent=“你好，正在测试！”；返回测试；};main.js

！-导入测试模块，并将内容添加到#root-br var test=require('的div中。/test . js ')；document.getElementById('root ')。appendChild(test())；第五步：

说实话，现在可以打包了，最后的结果就是操作main.js作为主入口，最后在公共文件夹打包OK后生成一个文件：bundle.js；然后当我们打开index.html文件时，我们会在页面上显示我们刚才说的句子；

但是，有一个问题被忽略了，那就是我们的配置文件呢？它们都在命令行上运行吗？这肯定很麻烦，不被认可，所以我们会在项目目录下创建另一个文件：webpack.congfig.js，并在其中写入配置文件：

module . exports={ entry : _ _ dirname '/app/main . js '，entry文件output 3360 { path : _ _ dirname '/public '，//打包文件存储目录filename: 'bundle.js'/打包输出文件的文件名}}这样我们就可以开始通过node_modules/。bin/web pack；

问题来了：

1.报告了错误！