webpack入门概念

一 概念

1 入口(entry)

入口起点（entry point）提示webpack 应该使用那个模块，来作为构建其内部依赖图得开始。进入入口七点后，webpack 会找出那些模块和库是入口起点（直接和间接）依赖的。

每一项依赖随即被处理，最后输出到称之为bundles的文件中，

可以通过webpack配置中的配置entry属性，来指指定一个入口起点（或多个入口起点）。默认值为 ./src。

webpack.config.文件中

module.exports = {
  entry:'./path/to/my/entry/file.js'          
}

2 出口(output)

output 属性告诉webpack再哪里输出它所创建的bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中，你可以通过再配置中指定一个output字段，来配置这些处理过程：

webpack.config.js

const path = require('path');
module.exports = {
  entry :'./path/to/my/entry/file.js',
  output:{
      path:path.resolve(_dirname,'dist'),
      filename:'my_first_webpack.bundle.js'  
    }  
}

在上面的示例中，我们通过output.path和output.filename两个属性，来告诉webpack bundle的名称以及我们想要bundle生成

（emit）到哪里。可能你想要了解在代码最上面导入的path模块是什么，它是一个node.js的核心模块。用于操作文件路径。

3 loader

loader 让webpack能够处理那些非javascript文件（webpack自身只理解javascript）。loader可以将所有类型的文件转换为webpacck能够处理的有效模块，然后你就可以利用webpack的打包能力，对他们进行处理。

本质上，webpack loader 将所有类型的文件，转化为应用程序的依赖图（和最终的bundle）可以直接引用的模块。

注意 ，loader能够import导入任何类型的模块（例如：.css文件）

在更高层面，在webpack的配置中loader有两个目标：

1 test 属性，用于标识出应该被对应的loader进行转换的某个或某些文件

2 use 属性， 标识进行转换时，应该使用哪一个loader

weback.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

以上配置中，对一个单独的module对象定义了rules属性，里面包含了两个必须属性：test和use。这告诉webpack编译器如下信息：

在require()/import 语句中被解析为'.txt'的路径时，在你对它进行打包之前，先使用raw-loader转换一下。

4 插件(plugins)

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境变量。插件接口功能及其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要require()它，然后把他添加到plugins数组中。多数插件可以通过选项（option）自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这是需要通过使用new操作符来创建他的一个实例。

webpack.config.js

const Htmlwebpackplugin = require('html-webpack-plugin');
const webpack = require('webpack');

const config = {
    module:{
         rules:[
            { test : /\.txt$/,use : 'raw-loader' }
         ]
    },
    plugins:{
       new webpack .optimize.UglifyJsPlugin(),
       new Htmlwebpackplugin({ template: './src/index.html' })
    }
}

module.exports = config;    

5 模式

通过选择development或production 之中的一个，来设置mode参数，你可以启用香英的模式下的webpack内置优化

module.export = {
    mode:'production'
}

二 入口起点

1单个入口（简写）语法

用法entry：string|Array<string>

webpack.config.js

const config = {
  entry ：'./path/to/my/entry/file.js'  
}
module.exports = config;

entry 属性的单个入口语法，是下面的简写：

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

注意：

当你向 entry 传入一个数组时会发生什么？

向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

使用此语法在扩展配置时有失灵活性。

2 对象语法

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

webpack.config.js

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

对象语法比较繁琐，然而，这是应用程序中定义入口的最可扩展的方式。

注意：

“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

3 常见场景 

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

webpack.config.js

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

这是什么？告诉我们webpack从app.js 和vendors.js开始创建依赖图，这些依赖图是彼此完全分离，相互独立的（每一个bundle中都有一个webpack引导（bootstrap））。这种方式比较常见于，只有一个入口起点（不包含vendor）的单页应用程序中。

 为什么？此设置允许你使用CommonsChunkPlugin从应用程序bundle中提取vendor引用到vendor bundle ，并且把引用vendor的部分替换为_webpack_require()调用。如果应用程序bundle中没有vendor代码，那么你可以在webpack中实现被称为长效缓存的通用模式

4 多页面应用程序

webpack.config.js

const config = {
   entry :{
      pageone:'./src/pagone/index.js',
      pagetwo:'./src/pagetwo/index.js',
      pagetree:'./src/pagetree/index.js',
   }
}    

为什么？告诉我们webpack需要三个独立分离的依赖图

为什么？在多页面应用程序中，（每当页面跳转时）服务器将会为你重新获取一个新的html文档，页面重新加载新文档，并且资源重新下载，然而，这给了我们特殊的机会去做很多事情

使用CommonsChunkPlugin 为每个页面间的应用程序共享代码创建bundle。由于入口起点增多，多页应用能够服用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益

三 输出 output

配置output 选项可以控制webpack如何向硬盘写入编译文件。注意即使存在多个入口起点，但只指定一个输出配置。

1 用法

在webpack中配置outpack属性的最低要求是，将它的值设置为一个对象，包括一下两点：

filename：用于输出文件的文件名；

目标输出目录path的绝对路径；

webpack.config.js

const config={
   output:{
      filename:'bundle.js',
      path:'./home/proj/public/assets'
    }
}
module.export = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。

2 多个入口起点

如果配置创建了多个单独得chunk（例如：使用多个入口起点或者使用像CommonChunkPlugin这样得插件），则应该使用占位符来确保每个文件具有唯一得名称

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

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

3 高级进阶

以下是使用 CDN 和资源 hash 的复杂示例：

config.js

output:{
     path: "/home/proj/cdn/assets/[hash]",
     publicPath: "http://cdn.example.com/assets/[hash]/"
}    

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 __webpack_public_path__。

__webpack_public_path__ = myRuntimePublicPath

// 剩余的应用程序入口

四 模式 mode

提供mode配置选项，告知webpack使用香英模式得内置优化。

string

1 用法

只在配置中提供mode选项：

module.exports = {
   mode:'production'
}

或者从命令中传参

wbpack --mode=production

支持一下字符串

选项	描述
development	会将 process.env.NODE_ENV 的值设为 development。启用  NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 process.env.NODE_ENV 的值设为 production。启用  FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,  ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,  OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

mode: development

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

mode: production

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

五 loader 

loader用于对模块得源代码进行转换。loader可以使你在import或‘加载’模块时预处理文件。因此，loader 类似于其实他构建工具中‘任务task’，并提供了处理前端构建步骤得强大方法。loader可以将文件从不同得语言（如：typeScript）转换成javascript，或将内联图像转换为data url 。loader甚至允许你直接在javascript模块中inport  CSS文件!

1 示例

你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

webpack.config.js

module.exports = {
    module :{
      rules:[
       {test:/\.css$/,use:'css-loader'},
       {test:/.\ts$/,use:'ts-loader'}
      ]
   }
}

2 使用 loader

在你的应用程序中，有三种使用 loader 的方式：

配置：在 webpack.config.js 文件中指定 loader。

内联：在每个 import 语句中显式指定 loader。

CLI：在 shell 命令中指定它们。

3 配置

 module.rules允许你在webpack中指定多个loader。这是展示loader得一种简明方式。并且有助于使代码变得更加简洁，同时让你对各个loader有个全局得概览：

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

4 内联

可以在import语句或者任何等效于 import 语句的方式中指定loader。使用！将资源中的loader分开，分开的每个部分都相当于当前目录解析，

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

通过前置所有规则及使用 ！。可以对应覆盖到配置中的任意loader。

选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

注意 ： 尽可能使用 module.rules，因为这样可以减少源码中的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

5 CLI

通过CLI来使用loader

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

这会对 .jade文件使用 jade-loader 对.css文件使用style-loader和css-loader

6 loader特性

• loader支持链式传递，能够对资源使用流水线，一组链式得loader将按照相反得顺序执行。loader链中得第一个loader返回值给下一个loader。在最后一个webpack所逾期得javaScript。
• loader可以是同步得也可以是异步的。
• loader运行在Node.js中，并且能够执行任何可能操作。
• loader接收查询参数。用于对loader传递配置。
• loader也能够使用option对象进行配置。
• 除了使用package.js常见得main属性。还可以将普通得npm模块导出为loader，做法实在package.js里定义一个loader字段。
• 插件（plugin）可以为loader带来更多特性
• loader能够产生额外得任意文件。

loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多能力。 用户现在可以更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译和其他更多。

7 解析loader

loader 遵循标准的模块解析。多数情况下，loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析。

loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。通常使用 npm 进行管理，但是也可以将自定义 loader 作为应用程序中的文件。按照约定，loader 通常被命名为 xxx-loader（例如 json-loader）

六 插件 plugin

插件得目的用于解决loader无法实现得其他事.

1 剖析

webpack插件是一个具有apply属性得JavaScript对象。apply属性会被webpack compiler 调用，并且comipler对象可以在整个编译生命周期访问。

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler){
    compiler.hook.run.tap(pulginName,compilation =>{
       console.log("webpack 构建过程开始！");
    })
  }  
}

注意：compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，以便它可以在所有 hook 中复用。

2 用法

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

3 配置

webpack.config.js

const config = {
    entry :'./path/to/my/entry/first.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.js'})
    ]
};

module.exports = config;                                  

4 Node API

注意：即便使用 Node API，用户也应该在配置中传入 plugins 属性。compiler.apply 并不是推荐的使用方式。

const webpack = require('webpack'); //访问 webpack 运行时(runtime)
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);
compiler.apply(new webpack.ProgressPlugin());

compiler.run(function(err, stats) {
  // ...
});

七 配置

webpack 的配置文件，是导出一个对象的 JavaScript 文件。此对象，由 webpack 根据对象定义的属性进行解析。

因为 webpack 配置是标准的 Node.js CommonJS 模块，你可以做到以下事情：

• 通过 require(...) 导入其他文件
• 通过 require(...) 使用 npm 的工具函数
• 使用 JavaScript 控制流表达式，例如 ?: 操作符
• 对常用值使用常量或变量
• 编写并执行函数来生成部分配置

请在合适的时机使用这些特性。

虽然技术上可行，但应避免以下做法：

• 在使用 webpack 命令行接口(CLI)（应该编写自己的命令行接口(CLI)，或使用 --env）时，访问命令行接口(CLI)参数
• 导出不确定的值（调用 webpack 两次应该产生同样的输出文件）
• 编写很长的配置（应该将配置拆分为多个文件）

1 基本配置

webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

八 模块

1 什么是webpack模块？

对比node.js模块，webpack 模块 能够以各种方式表达它们得依赖关系，如下几个例子：

• ES2015 import 语句
• CommonJS require() 语句。
• AMD define 和 require 语句。
• css/sass/less 文件中的 @import语句。
• 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)。

2 支持模块类型

webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) _模块_，并且在bundle中引入这些_依赖_。 webpack 社区已经为各种流行语言和语言处理器构建了 loader，包括：

• CoffeeScript
• TypeScript
• ESNext (Babel)
• Sass
• Less
• Stylus

 九 模块解析

resolver是一个库，用于帮助找到模块得绝对路径。帮助webpack找到bundle中需要引入得模块代码，这些代码在包含在每个require/import语句中。当打包模块时，webpack使用enhanced-resolve来解析文件路径。

1 webpack中的解析规则

使用enhanced-resolve可以解析三种文件路径：

2 绝对路径

 不需要做进一步解析

import "/home/me/file";

import "C:\\User\\me\\file";

3 相对路径

import "../src/file1";
import "./file2"

在这种情况下，使用 import 或 require 的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require 中给定的相对路径，会添加此上下文路径(context path)，以产生模块的绝对路径(absolute path)。

4 模块路径

import "module";
import "module/lib/file";

模块将会在resolve.modules中指定的所有目录内搜索，你可以替换初始模块路径，次替换路径通过使用resolve.alias配置一个别名。

一旦根据上述规则解析路径后，解析器将检查路径是否指向文件或目录。如果只想一个文件：

• 如果路径具有文件扩展名，则直接将文件打包；
• 否则，将使用（resolve.extensions）选项作为文件扩展名来解析，此选项告诉解析器在解析中能够接受那些扩展名（例如：js ，jsx）

如果路径指向一个文件夹，则采取一下步骤找到具有正确扩展名的正确文件：

• 如果文件夹中包含package.json文件，则按照顺序查找resolve.mainFields 配置选项中指定的字段，并且package.json中的第一个这样的字段确定文件路径。
• 如果package.json文件不存在或者package.json文件中的main字段没有返回一个有效路径，则按照顺序查找resolve.mainFields配置选项中指定的文件名，看是否能在import/require目录下匹配到一个存在的文件名。
• 文件扩展名通过resolve.estensions 选项采用类似的方法进行解析

webpack根据构建目标为这些选项采用合理的默认配置。

5 解析loader 【Resolving Loaders】

Loader解析遵循与文件解析器指定的规则相同的规则。但是resolveLoader 配置选项可以用来为Loader提供独立解析规则。

6 缓存

每个文件系统访问都被缓存，以便更快触发对同一文件的多个并行或串行请求。在观察模式下，只有修改过的文件会从缓存中摘出。如果关闭观察模式，在每次编译前清理缓存。

十 依赖图 【dependency graph】

任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)（例如图像或 web 字体），并且可以把它们作为_依赖_提供给你的应用程序。

webpack 从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序。 从这些入口起点开始，webpack 递归地构建一个依赖图，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的 bundle- 通常只有一个 - 可由浏览器加载。

十一 构建目标

1 用法

在webpack配置中设置target的值

webpack.config.js

module.exports={
  target:'node'  
}

在上面例子中，使用node webpack 会编译为用于[类似Node.js]环境（使用Node.js的require，而不是使用任意的内置模块（如 fs或path）来加载chunk）。

每个target 都有各种部署/环境特定的附加项，以支持满足其需求。

2 多个target

webpack不支持向传入多个字符串，你可以通过打包两份分离配置来创建同构的库：

webpack.config.js

var path = require('path');
var serverConfig = {
    target: 'node',
    output:{
        path:path.rsolve(_dirname,dist);
        fileName:'lib.nade.js'
    }
    ……
};
var clientConfig = {
    target:'web',   // 默认值是 ‘web’ ，可省略
    output:{
        path:path.resolve(_dirname,'dist'),
         filename:'lib.js'
    }
    ……
};

module.exports=[serverConfig ,clientConfig ];

上面的例子将在你的 dist 文件夹下创建 lib.js 和 lib.node.js 文件。

十二 模块热替换

模块热替换功能会在应用程序过程中替换，添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度。

• 保留在完全重新加载页面时丢失应用程序状态；
• 只更新变更内容，以节省宝贵的开发时间
• 调整央视更加快捷，几乎相当于在浏览器调试其中更改样式