webpack4系列教程（一）：初识webpack

TigerChain 发布于2019-08-23 14:37 / 1054人阅读

摘要：当处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个。而可以将所有类型的文件处理成能够识别的有效模块，然后再对其进行处理。

1. 什么是webpack

先来看看官网对webpack的介绍：

本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

简单来说webpack就是一个JavaScript的打包器，将各种模块（module）打包成资源文件；还可以通过 Code Spliting 来把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件；webpack 可以使用 loader 来预处理文件，这允许你打包除了JavaScript 之外的任何静态资源。

官网首页很清晰的展示了webpack的主要功能：

我们可以看到，一堆 modules 经过 webpack 打包处理成了各种静态资源。这就是 webpack

2. webpack核心概念

在开始学习 webpack 之前，你需要了解 webpack 的四个核心概念：

入口（entry）

出口（output）

loader

插件（plugins）

2.1 入口（entry）

入口指示 webpack 应该使用哪个模块，来开始构建其内部依赖。进入入口后，webpack 会找出有哪些模块和库是与入口相依赖的。

我们可以在webpack配置中配置entry属性，来设置一个或多个入口起点。以下是一个简单的entry配置：

const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }
}
module.exports = config

2.2 出口（output）

设置output是为了告诉webpack要在哪里输出其创建的bundle，并且可以对bundle命名。示例：

const path = require("path")
const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }，  
  output: {
    filename:"[name].bundle.js",
    path: path.join(__dirname,"./dist")  
  }
}
module.exports = config

我们通过 output.filename 来设置输出bundle的文件名， output.path 来设置 bundle 的输出路径

>path 是 nodeJs 中的核心模块，用来处理项目中的路径。

2.3 loader

由于 webpack 只认识 JavaScript 代码，因此就需要借助其他方法来处理那些非 JavaScript 文件，如 css、image、font等。而 loader 可以将所有类型的文件处理成 webpack 能够识别的有效模块，然后再对其进行处理。

loader 中有两个重要属性：

test属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件，通常是一个正则表达式；

use属性，表示进行转换时，应该使用哪个 loader；

const path = require("path")
 
const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }，
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "./dist")
  },
  module: {
    loaders: [
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      }
    ]
  }
}
 
module.exports = config

以上示例中loader的配置相当于告诉webpack在遇到 .ejs 的文件时，在打包之前先用 ejs-loader 装换一下。

2.4 插件（plugins）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 通过 npm 安装
 
const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }，
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "./dist")
  },
  module: {
    loaders: [
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack demo",
      template: path.join(__dirname, "./index.html")
    })
  ]
}
 
module.exports = config

HtmlWebpackPlugin 将为你生成一个 HTML5 文件，其中包括使用script标签的 body 中的所有 webpack 包，webpack 提供提供了许多功能强大的插件，查阅插件列表获取更多插件的使用方法。

专线服务私有云 webpack4教程 webpack4 webpack教程系列一

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100883.html

webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程(一): 打包JS

摘要：本身就是为了打包所设计，作为第一节，介绍怎么打包。检验规范支持支持。创建文件夹，其中和分别用和规范编写。收尾打包后的文件会按照我们的配置放在目录下，这时，需要创建一个文件，引用打包好的文件。个人网站原文链接系列教程一打包 webpack 本身就是为了打包js所设计，作为第一节，介绍怎么打包js。 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD。...

chanthuang 2019-08-23 10:31 评论0 收藏0
webpack4 系列教程: 前言

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

DevWiki 2019-08-23 10:25 评论0 收藏0
webpack4系列教程（二）：创建项目，打包第一个JS文件

摘要：对于大多数项目，建议本地安装。打包第一个文件首先，我们在根目录下创建一个文件和一个文件夹。而中的属性，表示入口的名称，此处就是。接下来打开文件，来编写一条命令执行的打包。 1. 创建项目 1.1 初始化一个项目首先安装nodejs，打开 nodeJs官网直接下载安装即可，安装完毕后打开命令行工具，进入你的项目文件夹，执行 npm init 进行项目的初始化： showImg(htt...

waterc 2019-08-23 14:40 评论0 收藏0