专栏首页front-end technology【进阶1.1webpack的基础概念】

【进阶1.1webpack的基础概念】

webpack

webpack的概念和基础使用

一.webpack 的基本概念

webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包。借用 webpack 官网的图片:

如上图,webpack 会把我们项目中使用到的多个代码模块(可以是不同文件类型),打包构建成项目运行仅需要的几个静态文件。 webpack 有着十分丰富的配置项,提供了十分强大的扩展能力,可以在打包构建的过程中做很多事情。 我们先来看一下 webpack 中的几个基本概念。

1.1 入口

如上图所示,在多个代码模块中会有一个起始的 .js 文件,这个便是 webpack 构建的入口。 webpack 会读取这个文件,并从它开始解析依赖,然后进行打包。如图,一开始我们使用 webpack 构建时,默认的入口文件就是 ./src/index.js。 我们常见的项目中,如果是单页面应用,那么可能入口只有一个;如果是多个页面的项目,那么经常是一个页面会对应一个构建入口。 入口可以使用 entry 字段来进行配置,webpack 支持配置多个入口来进行构建:

  module.exports = {
    entry: './src/index.js'
  }

  // 上述配置等同于
  module.exports = {
    entry: {
      main: './src/index.js'
    }
  }

  // 或者配置多个入口
  module.exports = {
    entry: {
      foo: './src/page-foo.js',
      bar: './src/page-bar.js',
      // ...
    }
  }

  // 使用数组来对多个文件进行打包
  module.exports = {
    entry: {
      main: [
        './src/foo.js',
        './src/bar.js'
      ]
    }
  }

### 1.2 loader webpack 中提供一种处理多种文件格式的机制,便是使用 loader。我们可以把 loader 理解为是一个转换器,负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。

举个例子,在没有添加额外插件的情况下,webpack 会默认把所有依赖打包成 js 文件,如果入口文件依赖一个 .hbs 的模板文件以及一个 .css 的样式文件,那么我们需要 handlebars-loader 来处理 .hbs 文件,需要 css-loader 来处理 .css 文件(这里其实还需要 style-loader,后续详解),最终把不同格式的文件都解析成 js 代码,以便打包后在浏览器中运行。

当我们需要使用不同的 loader 来解析处理不同类型的文件时,我们可以在 module.rules 字段下来配置相关的规则,例如使用 Babel 来处理 .js 文件:

  module.exports = {
    module: {
      // ...
      rules: [
        {
          test: /\.jsx?/, // 匹配文件路径的正则表达式,通常我们都是匹配文件类型后缀
          use: 'babel-loader', // 指定使用的 loader
        },
      ],
    }
  }

loader 是 webpack 中比较复杂的一块内容,它支撑着 webpack 来处理文件的多样性。后续我们还会介绍如何更好地使用 loader 以及如何开发 loader。

1.3 plugin

在 webpack 的构建流程中,plugin 用于处理更多其他的一些构建任务。可以这么理解,模块代码转换的工作由 loader 来处理,除此之外的其他任何工作都可以交由 plugin 来完成。通过添加我们需要的 plugin,可以满足更多构建中特殊的需求。例如,要使用压缩 JS 代码的 uglifyjs-webpack-plugin 插件,只需在配置中通过 plugins 字段添加新的 plugin 即可:

  const UglifyPlugin = require('uglifyjs-webpack-plugin')

  module.exports = {
    plugins: [
      new UglifyPlugin()
    ],
  }

除了压缩 JS 代码的 uglifyjs-webpack-plugin,常用的还有定义环境变量的 DefinePlugin,生成 CSS 文件的 ExtractTextWebpackPlugin 等。在这里提到这些 plugin,只是希望读者们能够对 plugin 的作用有个大概的印象,后续的小节会详细介绍如何使用这些 plugin。

plugin 理论上可以干涉 webpack 整个构建流程,可以在流程的每一个步骤中定制自己的构建需求。第 15 小节我们会介绍如何开发 plugin,让读者们在必要时,也可以在 webpack 的基础上开发 plugin 来应对一些项目的特殊构建需求。

1.4 output

webpack 的输出即指 webpack 最终构建出来的静态文件,可以看看上面 webpack 官方图片右侧的那些文件。当然,构建结果的文件名、路径等都是可以配置的,使用 output 字段:

  module.exports = {
    // ...
    output: {
      filename: 'bundle.js'
    },
  }

  // 或者多个入口生成不同文件
  module.exports = {
    entry: {
      foo: './src/foo.js',
      bar: './src/bar.js'
    },
    output: {
      filename: '[name].js'
    },
  }

  // 路径中使用 hash,每次构建时会有一个不同 hash 值,避免发布新版本时线上使用浏览器缓存
  module.exports = {
    // ...
    output: {
      filename: '[name].js'
    },
  }

我们一开始直接使用 webpack 构建时,默认创建的输出内容就是 ./dist/main.js。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从零认识webpack4.0,带你走进神秘的webpack

    前言: 作为一个现代javascript 应用程序的静态模块打包器,webpack能将各种资源,如js,css, 图片等作为模块来处理,是当下前端工程化的一个很...

    前端老鸟
  • vue源码分析前置知识必备

    最近利用空闲时间又翻看了一遍Vue的源码,只不过这次不同的是看了Flow版本的源码。说来惭愧,最早看的第一遍时对Flow不了解,因此阅读的是打包之后的vue文件...

    前端老鸟
  • ​vue源码分析前置知识必备

    最近利用空闲时间又翻看了一遍Vue的源码,只不过这次不同的是看了Flow版本的源码。说来惭愧,最早看的第一遍时对Flow不了解,因此阅读的是打包之后的vue文件...

    前端老鸟
  • 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!

    [前言]:因为最近在搞****API的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包...

    外婆的彭湖湾
  • webpack入门

    前言:这两天在网上找了些视频和资料学习webpack,最后发现官网上的教程原来就写得很好,只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程,然后总结...

    Ewall
  • webpack原理与实战

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 image.png webpack是一个js打包工具,不一个完整的前端...

    IMWeb前端团队
  • 还学不会webpack?看这篇!

    Webpack已经流行好久了,但很多同学使用webpack时还是一头雾水,一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例...

    MudOnTire
  • 还学不会webpack?看这篇!

    Webpack已经流行好久了,但很多同学使用webpack时还是一头雾水,一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例...

    Fundebug
  • 【webpack】260- 还学不会webpack?看这篇!

    Webpack 已经流行好久了,但很多同学使用 webpack 时还是一头雾水,一下看到那么多文档、各种配置、各种 loader、plugin 立马就晕头转向了...

    pingan8787
  • webpack4 入门

    源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3

    lilugirl

扫码关注云+社区

领取腾讯云代金券