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

前言

(在过去)对我这种渣渣来说,在项目里面一旦配置好了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自带的一些优化插件,例如CommonsChunkPluginDllPlugin等,还有一些需要我们自己install的插件(也属于webpack生态圈中的),例如ExtractTextWebpackPluginHtmlWebpackPlugin等(更多可以看看官网的介绍https://webpack.docschina.org/plugins ),还有就是一些webpack社区中一些优秀的插件例如happyPackImageminPlugin等。。。可能对一些刚刚入门的同学来说有点看不懂,不过没所谓,慢慢来,你以后都会用上的~

以下是一个简单的栗子

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的基本架构和构建流程

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

你可能感兴趣的:(webpack学习笔记——入门篇:通俗理解webpack)