webpack 四个核心概念

2023年4月4日 216次阅读 来源: 贵在随心

webpack 是当下最热门的前端资源模块化和打包工具。它可以将许多松散的模块（如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等）按照依赖和规则打包成符合生产环境部署的前端资源。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图表，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundler，由浏览器加载

在了解 webpack 使用配置时，我们必须首先要熟悉下面四个核心概念：

  • entry：入口
  • output：出口
  • loaders：加载器
  • plugins：插件

一、entry：入口

在 webpack 执行处理应用程序时，会形成一个依赖关系图表。在这个图表的起点就是入口起点（entry point），进入这个入口后，webpack 就可以计算出入口点依赖的模块和库。
如何在 webpack.config.js 中配置入口点呢？

单个入口语法

用法： entry: string |Array<sting>

// webpack.config.js
const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

单个入口简写：

// webpack.config.js
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

当你想要注入多个依赖文件时，可以向 entry 属性传入一个数组，数组是由文件路径组成。这样可以快速地设置 webpack 的配置，创建“多个主入口（multi-main entry）”，但这种方法不利于配置的扩展。

对象语法

用法：entry: {[entryChunkName: string]: string|Array<string>}

// webpack.config.js
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js' 
  }
}

对象语法虽然繁琐，但是它是应用程序入口最可扩展的方式。
**“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。用于将关注点从环境、构建目标、运行时中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

常用场景

1、分离应用程序和第三方库入口

// webpack.config.js
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

webpack 创建的依赖图是彼此完全分离、相互独立的，上述写法比较适用于单页面应用程序。
执行 webpack 时，会使用 commonChunkPlugin 从 bundle 文件中提取 vendor 引用到 vendor bundle，并把引用 vendor 的部分替换为 webpack_require() 调用。
2、多页面应用程序

// webpack.config.js
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
}

webpack 在多页面应用中，会使用 commonChunkPlugin 为每个页面应用创建 bundle 文件，在入口起点中时每个页面都能对代码和模块实现复用。

二、output：输出

这是属性的作用是：控制 webpack 如何向硬盘写入编译文件。需要注意的是，即使是存在多个入口起点，也只指定一个输出配置。
1、用法
在 output 属性中需要配置 filename 和 path 两个配置项：

  • filename：输出文件的文件名
  • path：目标输出的目录，是一个绝对路径
// webpack.config.js
const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。
2、多个入口起点
如果配置中存在多个入口起点，则需要使用一定的标识符确保每个输出的文件名的唯一性。

// webpack.config.js
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

为了确保每个输出 bundle 名称的唯一性，需要借用一下方式来替换：

// 1、使用入口名称
filename: "[name].bundle.js"

// 2、使用内部 chunk id
filename: "[id].bundle.js"

// 3、使用每次构建生成的唯一的 hash 
filename: "[name].[hasn].bundle.js"

// 4、使用基于每个 chunk 内容的 hash
filename：“[chunkhash].bundle.js”

三、loader：加载器

loader 是用于对模块的源代码进行转换。在需要加载模块时对其做预处理，它可以将文件从不同的语言（如 typescript）转换为 JavaScript，或将内联图像转为 data URL，甚至允许你直接在 JavaScript 模块中 import CSS文件。
1、使用 loader 的三种方式

  • 配置（推荐）：在 webpack.config.js 文件中指定 loader
  • 内联： 在每个 import 语句中显示指定 loader
  • CLI： 在 shell 命令中指定它们
    配置：
    在 modul.rules 中允许你在 webpack 配置中指定多个loader。
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

内联

import Styles from 'style-loader!css-loader?modules!./styles.css';

使用 ！ 将资源中的 loader 分开，分开的每部分都相对于当前目录解析。通过前置所有规则及使用 ！，通过对选项传递查询参数，可以对应覆盖到配置中的任意 loader。
CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

上述是使用 webpack 命令，对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。
2、loader 所具有的特性

  • loader 支持链式传递。能够对资源使用流水线（pipeline）。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个loader 返回值给下一个 loader。在最后一二 loader，返回 webpack 所预期的 JavaScript。
  • loader 可以是同步的，也可以是异步的。
  • 运行在node.js 中，并且能够执行任何可能的操作。
  • 接收查询参数，用于对 loader 传递配置
  • 可以使用 options 对象进行配置
  • 除了使用package.json 常见的 main 属性，还可以将普通的 你怕吗 模块导出为 loader
  • 插件可以为 loader 带来更多特性
  • loader 能够产生而外的任意文件

四、plugins：插件

webpack 中的插件的出现，主要是为了实现 loader 无法实现的功能，是webpack 中核心部分。
webpack 插件是一个具有 apply 属性的 JavaScript 对象，apply 属性会被 webpack 编译器调用，并且编译器对象可以在整个编译生命周期访问。
用法
在 webpack 配置中，你可以携带参数或者选项，想 plugins 属性中传入 new 实例：
1、在配置中传入 new 实例

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

2、Node API 传入 new 实例


//

戳我博客

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