webpack学习笔记——入门篇：通俗理解webpack

2023年11月29日 149次阅读 来源: Eason_Wong

前言

（在过去）对我这种渣渣来说，在项目里面一旦配置好了webpack之后，就再也不想碰这玩意儿了，因为实在是太多的坑。。。使用一个插件可能要把config文件改个十几二十遍，还得不断地跑起来看是不是生效了，有时候突然生效了也不知道原因是啥-.-反正下次再配的时候又会不记得。。

笔者对webpack是又爱又恨啊（应该很多读者也有一样的想法吧hhhh）又不得不去使用它，所以在前端的学习路上一路与webpack斗智斗勇，因而有了这篇wbpack的学习笔记，以下是笔者在实践中还有参考了无数优秀的webpack相关文章写下的笔记，假如有不当之处请及时指出～谢谢🙏💗

webpack是？了解一下

webpack可以说是一个模块打包器，让你可以放心地写你的前端项目，放心地使用社区上最流行的库，模块，插件，框架等等。不用担心，webapck都会根据你的项目帮助你将其打包好，打包好的文件可以直接提供给浏览器使用噢。

四个核心

  • 入口（entry）

我们要告诉webpack它应该从哪里开始构建我们的项目，所以我们要指定一个或多个js文件作为入口文件（parcel是可以以html和js作为入口文件），然后webpack就会从入口文件开始构建其内部依赖，形成一个依赖图。

  • 出口（output）

webpack构建好后会生成称为bundles的文件中，所以我们需要告诉webpack出口文件放在哪个位置，如何命名等规则。

  • 预处理器（loader）

因为webpack本身只认识JavaScript文件，loader可以帮我们把其他类型的文件转化为它能处理的模块，包括图片，字体，css，ES6，ts，vue模版等。不同的文件会有不同的loader去转化。当然你可以在每个loader按照粒度去配置你的逻辑，但是要注意书写顺序等小问题噢（也就是说会有很多各种各样的小坑等着你）

  • 插件（plugins）

都说插件是webpack的支柱功能，它负责完成loader无法完成的其他事项。我们可以在插件里引入webpack自带的一些优化插件，例如CommonsChunkPlugin，DllPlugin等，还有一些需要我们自己install的插件（也属于webpack生态圈中的），例如ExtractTextWebpackPlugin，HtmlWebpackPlugin等（更多可以看看官网的介绍https://webpack.docschina.org/plugins ），还有就是一些webpack社区中一些优秀的插件例如happyPack，ImageminPlugin等。。。可能对一些刚刚入门的同学来说有点看不懂，不过没所谓，慢慢来，你以后都会用上的～

以下是一个简单的栗子

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: path.join(__dirname, 'main.js'),
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'js/bundle.js'
  },
  module: {
     rules: [
          { test: /\.css$/, use: 'css-loader' },
          { test: /\.ts$/, use: 'ts-loader' }
     ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    })
  ]
};

引人注目的几大特性

tree shaking

大概意思就是自动剔除一些我们程序中不会用上的多余代码，而webpack可以结合一些能够删除未引用代码的插件（例如uglifyJS），帮助我们完成这个事情。例如你import了一个js文件但是只用了里面的其中一个函数，webpack打包的时候就会只打包那个函数的代码而不是整个js文件。

code split

webpack能够按需对代码进行分离，还能动态的并行的去加载这些文件，（合理应用的情况下）这能让我们大大提高加载效率。我们可以通过入口起点的直接分离，动态引入模块，提取公共模块等方式进行代码分离～

开发环境

我们在开发的时候，出现bug时当然是不想看着打包后的代码来调试的（而且不一定看得懂），我们希望的是我们能在本地起一个服务，直接调试自己的源代码，明确追踪到每一行代码，而且能做到改完代码保存后能马上看到效果，而不是要刷新整个页面或者整个项目跑一遍，而webpack可以帮我们做到这一点。

构建&执行过程

要完全理解webpack整个构建过程是有难度的，这需要你去学习webpack的源码，这里简单地说一下webpack的执行过程:

  • webpack先识别我们写的配置表选项，进行一系列的初始化

  • webpack从入口文件开始进行编译，递归解析对应依赖的文件，需要进行预处理的文件会根据配置的loader去转换

  • 根据不同块之间的依赖进行分组，分成不同的chunk

  • 将不同的chunk转成对应的输出文件

  • plugin会贯穿这个编译的过程，会在适当的时机调用适当的插件

对于详细地结合源码分析，日后会继续和大家学习与分享～

参考资料

webpack官方文档

webpack4之基础篇

玩转webpack（一）：webpack的基本架构和构建流程

欢迎你随时提出你的建议，假如这篇文章对你有帮助的话可以给我点个❤️哦～

    原文作者：Eason_Wong
    原文地址: https://www.jianshu.com/p/7ddc91b3de6e
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞