前端打包工具 - webpack介绍使用【包括初始化一个项目】_打包dist用户什么开发工具-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43924896/article/details/115559032

本文介绍了webpack作为热门的打包工具，其主要功能是将多种类型的文件打包成浏览器可识别的js和css文件。通过一个简单的webpack配置示例，展示了如何设置入口文件和输出路径。同时，讨论了在实际项目中，由于模块化和项目复杂性的需求，js和css文件需要被打包，而HTML文件通常不需要。最后，提到了在简单项目中直接分发源文件，而在复杂项目中需要打包后的dist文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原视频地址

webpack介绍

webpack是一个热门的打包工具。很多框架把webpack作为功能的一部分，比如react。
webpack有两个优点：代码分割并按需加载 + 有loaders概念，用来处理各种类型的文件
在这里插入图片描述
这张图可以说明webpack的作用：
把一系列相互依赖的各种类型的文件，通过webpack打包，变成相互独立的、浏览器可以识别的静态js和css文件

基本使用

在这里插入图片描述

可以看到文件目录如下：

此时在目录下新建一个文件hello.js，可以使用安装的webpack对这个文件进行打包：

可以看到目录中生成一个打包后的文件hello.bundle.js:
在这里插入图片描述
这次打包就完成了！

其实这次我没有执行成功：

提示“CLI for webpack must be installed.” 通过安装webpack-cli解决：npm i -g webpack-cli
执行命令“webpack ./src/script/main.js ./dist/firstTry.bundle.js” 报错：Module not found: Error: Can’t resolve ‘./dist/firstTry.bundle.js’
in ‘E:\Learning\webpack-project’

估计是在package.json文件里加一些参数可以解决。不过没深究，有说法是webpack版本太新，要使用-o命令执行：webpack
./src/script/main.js -o ./dist/firstTry.bundle.js
的确不报错了，只是生成的是个文件夹。如下：

在实际项目中使用

一切同上：
在这里插入图片描述
然后，

然后，我们需要建一个初始文件index.html,其中引入我们打包后的js文件，我们命名它为bundle.js;
然后，
在src文件夹中，建一个script文件夹用来放js文件；
建一个style文件夹用来放样式文件
在这里插入图片描述
然后，我们需要创建一个webpack配置文件webpack.config.js

如果我们使用webpack命令，它会在项目的根目录中寻找webpack.config.js文件，作为默认配置

webpack.config.js的基本配置：

注意，使用webpack命令，必须配置webpack.config.js文件，不然会报错，比如“can’t resolve ‘./src’”

如上配置webpack.config.js，在webpack-test文件夹下直接执行webpack命令，还是会报错：“./dist/js is not an absolute path”
解决办法：
output.path 需要一个绝对路径，但你给它一个相对路径 ./ dist 。你需要转换它为绝对路径，例如使用 path.resolve。配置如下：

var path = require("path")
module.exports = {
  entry: './src/script/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

如果我们想给webpack命令一些默认的参数，可以配合npm的脚本来实现： npm的脚本对应了项目中的package.json文件，其中有一个scripts属性，用来写脚本。
做如下设置：
在这里插入图片描述
然后，我们运行 npm run webpack 即可执行上面webpack命令（调用webpack.config,js作为默认配置，看到进程，看到打包的模块，多彩显示，显示出原因）

我想说的

观察配置的最基本的webpack.config.js文件，可以看到，主要是配置了打包的入口文件和生成的打包文件。

var path = require("path")
module.exports = {
  entry: './src/script/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

而入口文件是js文件，当然打包后的文件也是js文件。
然后我们需要做的，就是在html文件中引入打包后的js文件。
为什么只打包js文件呢？css文件，html文件就不需要打包吗？

参考另一篇文章为什么要打包
打包的主要原因是项目复杂时，有大量的js文件，可能只有一个HTML文件。
为了开发简单，js引入了模块化的特性。js是通过被HTML使用发挥作用的，可是HTML文件本身是不支持js模块化的export/import/require等命令，所以打包js文件是必须的。
类似于js的模块化，像是后来的css语言，比如sass等，也有模块化的趋势。而且项目的复杂也势必导致样式文件繁杂，所以样式文件的打包也是需要的。
综上，HTML文件的确不需要打包，js文件和样式文件需要打包。

假如是一个非常简单的项目，比如一个HTML文件，引入一个js文件，引入一个样式文件这样的：
在这里插入图片描述
没有js的互相引入，那就没必要打包。要给别人运行，直接把文件夹发给别人，运行HTML文件就可以了。
之所以我们的项目要部署到客户的虚机上，需要发打包过的dist文件，是因为我们的项目比较复杂，因此，需要通过打包变成浏览器可以识别的代码，才发给客户。客户是没有必要安装打包软件对我们的源代码进行解析的。