webpack 四个核心概念

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞