webpack基础笔记

概念

本质：
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

入口(entry)

配置
通过在webpack配置中配置entry属性，指定一个或多个入口起点，默认值是./src。
##单个入口简写语法
用法：entry: string|Array<string>
webpack.config.js
module.exports = { entry: './path/to/my/entry/file.js' };
完整写法如下：
entry: { main: './path/to/my/entry/file.js' }

对象语法

用法：entry: {[entryChunkName: string]: string|Array<string>}
entry: { app: './src/app.js', vendors: './src/vendors.js' }
#出口(output)
配置
配置中指定一个output字段，默认为./dist 。

用法

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：
1、filename 用于输出文件的文件名。
2、目标输出目录 path 的绝对路径。
webpack.config.js
const path = require('path'); module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } };

多个入口起点

如果配置创建了多个单独的 “chunk”（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。
{ entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } } // 写入到硬盘：./dist/app.js, ./dist/search.js
PS：
1、output.filename和output.path分别指定导出文件名和路径
2、path是Node.js的核心模块，用于操作文件路径
3、即使可以存在多个入口起点，但只指定一个输出配置。

模式(mode)

用法

module.exports = {
  mode: 'production'
};

或者从 CLI 参数中传递：
webpack --mode=production

支持值

**1、**development：将 process.env.NODE_ENV 的值设为 development
**2、**production：将 process.env.NODE_ENV 的值设为 production

PS

**1、**只设置 NODE_ENV，则不会自动设置 mode。
**2、**不同模式会启动不同的优化

loader

作用

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。

使用

在你的应用程序中，有三种使用 loader 的方式：
**1、**配置（推荐）：在 webpack.config.js 文件中指定 loader。
**2、**内联：在每个 import 语句中显式指定 loader。
**3、**CLI：在 shell 命令中指定它们。

配置

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

内联

CLI

插件(plugins)

剖析

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

用法

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

配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
module.exports = {
  module: {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Node API

配置

**1、**webpack 的配置文件，是导出一个对象的 JavaScript 文件。此对象，由 webpack 根据对象定义的属性进行解析。
**2、**webpack 配置是标准的 Node.js CommonJS 模块，你可以做到以下事情：

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

模块(modules)

什么是 webpack 模块

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

module.noParse

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制
RegExp | [RegExp]
RegExp | [RegExp] | function（从 webpack 3.0.0 开始）

Rule.enforce

可能的值有：“pre” | “post”

Rule.exclude

Rule.include

模块解析(module resolution)

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