webpack

webpack 是 JS 的静态模块打包器。当 webpack 处理应用程序时，它会将所有这些模块打包成一个或多个文件。

配置webpack

entry

入口起点指示 webpack 打包的起点。进入入口起点后，webpack 会找出模块的每个依赖，随即被处理输出。

entry： 来指定一个入口起点（或多个入口起点），默认值为 ./src；

单入口

  entry: {
    index: './src/pages/index/index.js'
  }

多入口

 entry: {
    index: './src/pages/index/index.js',
    index1: './src/pages/index1/index.js'
  },

output

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。

注意，即使可以存在多个入口起点，但只指定一个输出配置。

output ：指定输出，默认值为 ./dist；

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

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

  entry: {
    index: './src/pages/index/index.js',
    index1: './src/pages/index1/index.js'
  },
  output: {
    // 输出的目录
    path: resolve('dist'),
    // 输出的文件名
    [name]对应 entry 下个的入口文件名
    filename: 'js/[name].js'
  },

模式

mode ：参数为开发模式 development 或 生产模式 production ；

  // 开发模式
  mode: 'development',

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。

loader 的三种使用方式

配置（推荐）：在 webpack.config.js 文件中指定 loader。

rules 规则，用于配置loader；

test ：用于标识出对应的 loader 转换的文件；

use：表示进行转换时，应该使用的oader；

	  module: {
	    rules: [
	      // css
	      {
	        test: /\.css$/,
	        //loader从后往前执行
	        use: ['style-loader', 'css-loader']
	      },
	      // 图片
	      {
	        test: /\.(png|jpe?g|gif|svg)$/,
	        loader: 'url-loader',
	        options: {
	          // 小于 10K 的图片转成 base64 编码的 dataURL 字符串写到代码中
	          limit: 10000,
	          // 其他的图片转移到
	          name: 'images/[name].[ext]',
	          esModule: false
	        }
	      },
	      // 字体文件
	      {
	        test: /\.(woff2?|eot|ttf|otf)$/,
	        loader: 'url-loader',
	        options: {
	          limit: 10000,
	          name: 'fonts/[name].[ext]'
	        }
	      }
	    ]
	  },

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

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

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

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

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

plugins

插件目的在于解决 loader 无法实现的其他事。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

使用

使用插件，需要 require() 把它添加到 plugins 数组中；

多数插件可以通过选项(option)自定义；

使用 new 操作符来创建它的一个实例；

	plugins: [
	    // 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹
	    new HtmlWebpackPlugin({
	      filename: 'index.html',
	      template: './src/pages/index/index.art'
	    })
	  ]

模块解析

模块(modules)

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

webpack 模块

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系。

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

模块解析

resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用。

webpack 中的解析规则

使用 enhanced-resolve，webpack 能够解析三种文件路径：

绝对路径

import "/home/me/file";
import "C:\\Users\\me\\file";

相对路径

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

模块路径

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

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！