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\

 // 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\}

 // 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;