webpack入门教程：打包与构建-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44828486/article/details/119079072

本文介绍了webpack的基础知识，包括解决多静态资源导致的页面加载慢和依赖复杂问题的方法。讲解了webpack的合并、压缩等功能，以及如何通过配置文件简化打包命令。还通过一个列表隔行变色案例演示了webpack的初步使用。

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

typora-root-url: image

webpack-01在·

在网页中会引用哪些常见的静态资源？

.js .jsx .ts（TypeScript）

.css .less .sass .scss

Images

.jpg .png .gif .bmp .svg

字体文件（Fonts）

.svg .ttf .eot .woff .woff2

模板文件

.ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

网页中引入的静态资源多了以后有什么问题？？？

一个前端项目里面可能有多个 .js, 多个 .css , 多个静态图片，多个其他前端资源。
当一个页面需要加载多个 .js 的话，也会拖累整个页面的加载速度，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系，例如一些 js 资源彼此之间存在依赖关系。

如何解决上述两个问题

合并、压缩、精灵图、图片的Base64编码
使用webpack可以解决各个包之间的复杂依赖关系；

如图所示，webpack 就把左边的各种各样的静态资源，打包成了一个所谓的 assets 这样浏览器加载起来就快多了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HaCEv0Yr-1627182412042)(/image-20201218224702345.png)]

什么是webpack?

Webpack 是一个前端资源加载/打包工具（项目构建工具）。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
webpack 提供了友好的模块化支持，以及资源的合并、打包、压缩、混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
webpack官网

webpack安装的两种方式

npm 包管理机制包管理类似于 360的软件管理

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
webpack4.0以后版本，需要安装命令工具npm install webpack-cli -g
查看webpack 信息 npm info webpack 4.0以后直接输入该命令： webpack -v

初步使用webpack打包构建列表隔行变色案例

运行npm init-y初始化项目，使用npm管理项目中的依赖包
创建项目基本的目录结构 src 和dist
使用npm install jquery安装jquery类库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h3Rmu1ZY-1627182412047)(/image-20210506192305367.png)]

创建main.js并书写隔行变色的代码逻辑：

	// 导入jquery类库
    import $ from 'jquery'
	
    // 设置偶数行背景色，索引从0开始，0是偶数
   $(function () {
    $('li:odd').css('background', 'red');
    $('li:even').css('background', 'green');
	}
   );

2.直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7kyA6fj9-1627182412052)(/image-20210506193151889.png)]

3.运行webpack 入口文件路径 -o 输出文件路径对main.js进行处理：

webpack ./main.js -o …/dist/bundle.js -o === --output

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UygRFnZm-1627182412056)(/image-20210506194935749.png)]

4.在index.html文件中引入打包后的js样式

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行变色借助jquery</title>

    <!-- 引入打包后的js文件 -->
    <script src="../dist/a.js/main.js"></script>
</head>

<body>
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
        <li>第9个li</li>
        <li>第10个li</li>
    </ul>
    
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VSl67Qxa-1627182412059)(/image-20210506195719813.png)]

不通过配置文件打包方式
webpack4 默认不需要再创建webpack.config.js来配置打包的入口和出口；

默认情况下， webpack
入口为./src/index.js文件
出口为./dist/main.js文件
确保入口文件/src/index.js位置正确，在项目根目录下运行命令：
PS C:\Users\Administrator\Desktop\QY133_ready\12、webpack\12_01、webpack01> webpack
webpack  默认打包  (最新版的可以不用引入配置文件)

https://blog.youkuaiyun.com/qq_45112637/article/details/116463541?spm=1001.2014.3001.5501

使用webpack的配置文件简化打包时候的命令

在项目根目录中创建webpack.config.js
由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

    // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件 __dirname当前模块目录名
        // 多入口
  		// entry:['./src/js/index.js','./src/js/one.js'],
        //entry: {
            //ind: './src/js/index.js',
            //on: './src/js/one.js'
        //},
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        // 多出口
        //output: {
         //   filename: 'js/webpack02.[name].js',
         //   path: path.resolve(__dirname, 'dist')
        //},
    }