// package.json
{
	"name": "webpack-demo",
	"version": "1.0.0",
	"description": "webpack学习项目",
	"main": "index.js",
	"scripts": {
		"dev": "webpack --mode development  --module-bind js=babel-loader",
		"build": "webpack --mode production --output ./output/main.js"
	},
	"author": "chen",
	"license": "ISC",
	"devDependencies": {
		"@babel/core": "^7.10.2",
		"@babel/preset-env": "^7.10.2",
		"babel-loader": "^8.1.0",
		"webpack": "^4.43.0",
		"webpack-cli": "^3.3.11"
	}
}

webpack.config.js 配置文件

// webpack.config.js文件

// path 模块提供用于处理文件路径和目录路径的实用工具。 它可以使用以下方式访问：
const path = require(‘path‘)

// 然后通过module.exports将 Webpack 的配置导出
module.exports = {
	mode: ‘development‘,
	entry: ‘./src/index.js‘,
	output: {
		// path.resolve( )方法  可以将路径或者路径片段解析成绝对路径
		// 只传入__dirname也可以自动调用path.resolve方法 但是无法和后面的路径进行拼接
		// __dirname代表的是当前文件的绝对路径
		path: path.resolve(__dirname, ‘dist‘),
		filename: ‘foo.bundle.js‘,
	},
}


// ??如果我们只使用一个配置文件来区分生产环境（production）和开发环境（development）
// 则可以使用函数类型的 Webpack 配置，函数类型的配置必须返回一个配置对象，如下面：

// Webpack 配置函数接受两个参数env和argv：分别对应着 环境对象 和 Webpack-CLI 的命令行选项，例如上面代码中的--optimize-minimize。

module.exports = (env, argv) => {
	return {
		mode: env.production ? ‘production‘ : ‘development‘,
		devtool: env.production ? ‘source-maps‘ : ‘eval‘,
		plugins: [
			new TerserPlugin({
				terserOptions: {
					compress: argv[‘optimize-minimize‘], // 只有传入 -p 或 --optimize-minimize
				},
			}),
		],
	}
}

配置的使用

默认情况下，Webpack 会查找执行目录下面的webpack.config.js作为配置，如果需要指定某个配置文件，可以使用下面的命令：

--config build/webpack.dev.js

Webpack 常见名词解释

mode 模式

Webpack4.0 开始引入了mode配置，通过配置mode=development或者mode=production来制定是开发环境打包，还是生产环境打包，比如生产环境代码需要压缩，图片需要优化，Webpack 默认mode是生产环境，即mode=production。

在配置文件中设置mode：

module.exports = {
    mode: ‘development‘
};

Webpack 的入口（entry）和输出（output）

webpack 是一个模块打包工具，能够从一个需要处理的 JavaScript 文件开始，构建一个依赖关系图（dependency graph），该图映射到了项目中每个模块，然后将这个依赖关系图输出到一个或者多个 bundle 中

Webpack 的两个核心概念：entry和output，即入口和输出

Webpack 是从指定的入口文件（entry）开始，经过加工处理，最终按照output设定输出固定内容的 bundle；而这个加工处理的过程，就用到了loader和plugin两个工具；loader是源代码的处理器，plugin解决的是 loader处理不了的事情。

在介绍entry之前，介绍下context（上下文），context即项目打包的相对路径上下文，如果指定了context="/User/test/webpack"，那么我们设置的entry和output的相对路径都是相对于/User/test/webpack的，包括在 JavaScript 中引入模块也是从这个路径开始的。由于context的作用，决定了context值必须是一个绝对路径。

// webpack.config.js
module.exports = {
    context: ‘/Users/test/webpack‘
};

Tips：在实际开发中 context 一般不需要配置，不配置则默认为process.cwd()即工作目录。

entry入口

Webpack 的entry支持多种类型，包括字符串、对象、数组。从作用上来说，包括了单文件入口和多文件入口两种方式。

单文件入口

单文件的用法如下：

module.exports = {
    entry: ‘path/to/my/entry/file.js‘
};
// 或者使用对象方式
module.exports = {
    entry: {
        main: ‘path/to/my/entry/file.js‘
    }
};

单文件入口可以快速创建一个只有单一文件入口的情况，例如 library 的封装，但是单文件入口的方式相对来说比较简单，在扩展配置的时候灵活性较低。

module.exports = {
    mode: ‘development‘,
    entry: [‘./src/app.js‘, ‘./src/home.js‘],
    output: {
        filename: ‘array.js‘
    }
};

Tips：上面配置无论是字符串还是字符串数组的 entry，实际上都是只有一个入口，但是在打包产出上会有差异：

多文件入口

多文件入口是使用对象语法来通过支持多个entry，多文件入口的对象语法相对于单文件入口，具有较高的灵活性，例如多页应用、页面模块分离优化。多文件入口的语法如下：

module.exports = {
    entry: {
        home: ‘path/to/my/entry/home.js‘,
        search: ‘path/to/my/entry/search.js‘,
        list: ‘path/to/my/entry/list.js‘
    }
};
??上面的语法将entry分成了 3 个独立的入口文件，这样会打包出来三个对应的 bundle，

Tips：对于一个 HTML 页面，我们推荐只有一个 entry ，通过统一的入口，解析出来的依赖关系更方便管理和维护。

output 输出

webpack 的output是指定了entry对应文件编译打包后的输出 bundle。output的常用属性是：

• path：此选项制定了输出的 bundle 存放的路径，比如dist、output等
• filename：这个是 bundle 的名称
• publicPath：指定了一个在浏览器中被引用的 URL 地址，后面详细介绍

当不指定 output 的时候，默认输出到 dist/main.js ，即 output.path 是dist，output.filename 是 main。

一个 webpack 的配置，可以包含多个entry，但是只能有一个output。对于不同的entry可以通过output.filename占位符语法来区分，比如：

module.exports = {
    entry: {
        home: ‘path/to/my/entry/home.js‘,
        search: ‘path/to/my/entry/search.js‘,
        list: ‘path/to/my/entry/list.js‘
    },
    output: {
        filename: ‘[name].js‘,
        path: __dirname + ‘/dist‘
    }
};

其中[name]就是占位符，它对应的是entry的key（home、search、list），所以最终输出结果是：

path/to/my/entry/home.js → dist/home.js
path/to/my/entry/search.js → dist/search.js
path/to/my/entry/list.js → dist/list.js

我将 Webpack 目前支持的占位符列出来：

[hash] 和 [chunkhash] 的长度可以使用 [hash:16]（默认为 20）来指定。或者，通过指定output.hashDigestLength在全局配置长度，那么他们之间有什么区别吗？

[hash]：是整个项目的 hash 值，其根据每次编译内容计算得到，每次编译之后都会生成新的 hash，即修改任何文件都会导致所有文件的 hash 发生改变；在一个项目中虽然入口不同，但是 hash 是相同的；hash 无法实现前端静态资源在浏览器上长缓存，这时候应该使用 chunkhash；

[chunkhash]：根据不同的入口文件（entry）进行依赖文件解析，构建对应的 chunk，生成相应的 hash；只要组成 entry 的模块文件没有变化，则对应的 hash 也是不变的，所以一般项目优化时，会将公共库代码拆分到一起，因为公共库代码变动较少的，使用 chunkhash 可以发挥最长缓存的作用；

[hash]、[chunkhash]和[contenthash]都支持[xxx:length]的语法。

Tips: 占位符是可以组合使用的，例如[name]-[hash:8]

output.publicPath

对于使用<script> 和 <link>标签时，当文件路径不同于他们的本地磁盘路径（由output.path指定）时，output.publicPath被用来作为src或者link指向该文件。这种做法在需要将静态文件放在不同的域名或者 CDN 上面的时候是很有用的。

module.exports = {
    output: {
        path: ‘/home/git/public/assets‘,
        publicPath: ‘/assets/‘
    }
};

则输出：

<head>
    <link href="/assets/logo.png" />
</head>

上面的/assets/logo.png就是根据publicPath输出的，output.path制定了输出到本地磁盘的路径，而output.publicPath则作为实际上线到服务器之后的 url 地址。所以我们在上 CDN 的时候可以这样配置：

module.exports = {
    output: {
        path: ‘/home/git/public/assets‘,
        publicPath: ‘http://cdn.example.com/assets/‘
    }
};

则输出：

<head>
    <link href="http://cdn.example.com/assets/logo.png" />
</head>

output.library

如果我们打包的目的是生成一个供别人使用的库，那么可以使用output.library来指定库的名称，库的名称支持占位符和普通字符串：

module.exports = {
    output: {
        library: ‘myLib‘ // ‘[name]‘
    }
};

resolve

Webpack 进行构建的时候会从入口文件开始（entry）遍历寻找各个模块的依赖，resolve 配置是帮助 Webpack 查找依赖模块的

通过 resolve 的配置，可以帮助 Webpack 快速查找依赖，也可以替换对应的依赖（比如开发环境用 dev 版本的 lib 等）。resolve 的基本配置语法如下：

module.exports = {
    resolve: {
        // resolve的配置
    }
};

下面来介绍下常用的 resolve 配置。

resolve.extensions

resolve.extensions是帮助 Webpack 解析扩展名的配置，默认值：[‘.wasm‘, ‘.mjs‘, ‘.js‘, ‘.json‘]，所以我们引入 js 和 json 文件，可以不写它们的扩展名，通常我们可以加上 .css、.less等，但是要确保同一个目录下面没有重名的 css 或者 js 文件，如果存在的话，还是写全路径吧。

module.exports = {
    resolve: {
        extensions: [‘.js‘, ‘.json‘, ‘.css‘]
    }
};

resolve.alias

resolve.alias 是最常用的配置，通过设置 alias 可以帮助 webpack 更快查找模块依赖，而且也能使我们编写代码更加方便。例如，我们在实际开发中经常会把源码都放到src文件夹，目录结构如下：

src
├── lib
│   └── utils.js
└── pages
    └── demo
        └── index.js

??这时可以通过设置 alias 来缩短这种写法，例如：
module.exports = {
    resolve: {
        alias: {
            src: path.resolve(__dirname, ‘src‘),
            ‘@lib‘: path.resolve(__dirname, ‘src/lib‘)
        }
    }
};

??经过设置了 alias，我们可以在任意文件中，不用理会目录结构，直接使用require(‘@lib/utils‘)或者require(‘src/lib/utils‘)来帮助 Webpack 定位模块。

module

在 webpack 解析模块的同时，不同的模块需要使用不同类型的模块处理器来处理，这部分的设置就在module配置中。module 有两个配置：module.noParse和module.rules，

module.noParse

module.noParse配置项可以让Webpack忽略对部分没采用模块化的文件的递归解析和处理，这样做的好处是能提高构建性能，接收的类型为正则表达式、正则表达式数组或者接收模块路径参数的一个函数：

module.exports = {
    module: {
        // 使用正则表达式
        noParse: /jquery|lodash/

        // 使用函数，从 Webpack 3.0.0 开始支持
        noParse: (content) => {
            // content 代表一个模块的文件路径
            // 返回 true or false
            return /jquery|lodash/.test(content);
        }
    }
}

Tips：这里一定要确定被排除出去的模块代码中不能包含import、require、define等内容，以保证 webpack 的打包包含了所有的模块，不然会导致打包出来的 js 因为缺少模块而报错。

module.rules

module.rules是在处理模块时，将符合规则条件的模块，提交给对应的处理器来处理，通常用来配置 loader，其类型是一个数组，数组里每一项都描述了如何去处理部分文件。每一项 rule 大致可以由以下三部分组成：

1. 条件匹配：通过test、include、exclude等配置来命中可以应用规则的模块文件；

   ?? Tips :exclude 的优先级高于 test 和 include

2. 应用规则：对匹配条件通过后的模块，使用use配置项来应用loader，可以应用一个 loader 或者按照从后往前的顺序应用一组 loader，当然我们还可以分别给对应 loader 传入不同参数；

3. 重置顺序：一组 loader 的执行顺序默认是从后到前（或者从右到左）执行，通过enforce选项可以让其中一个 loader 的执行顺序放到最前（pre）或者是最后（post）。

条件匹配

如上所述，条件匹配相关的配置有test、include、exclude、resource、resourceQuery和issuer。条件匹配的对象包括三类：resource，resourceQuery和issuer。

• resource：请求文件的绝对路径。它已经根据 resolve 规则解析；
• issuer: 被请求资源（requested the resource）的模块文件的绝对路径，即导入时的位置。

举例来说明：从 app.js 导入 ‘./style.css?inline‘：

• resource 是/path/to/style.css；
• resourceQuery 是?之后的inline；
• issuer 是/path/to/app.js。

来看下 rule 对应的配置与匹配的对象关系表：

举例说明，下面rule 的配置项，匹配的条件为：

匹配的条件为：来自src和test文件夹，不包含node_modules和bower_modules子目录，模块的文件路径为.tsx和.jsx结尾的文件。

{
    test: [/\.jsx?$/, /\.tsx?$/],
    include: [
        path.resolve(__dirname, ‘src‘),
        path.resolve(__dirname, ‘test‘)
    ],
    exclude: [
        path.resolve(__dirname, ‘node_modules‘),
        path.resolve(__dirname, ‘bower_modules‘)
    ]
}

Loader 配置

loader是解析处理器，通过loader我们可以将 ES6 语法的 js 转化成 ES5 的语法，可以将图片转成 base64 的dataURL，在 JavaScript 文件中直接import css 和 html 也是通过对应的loader来实现的。

我们在使用对应的loader之前，需要先安装它，例如，我们要在 JavaScript 中引入 less，则需要安装less-loader：

npm i -D less-loader

然后在module.rules中指定*.less文件都是用less-loader：

module.exports = {
    module:{
        rules:[
            test: /\.less$/,
            use:‘less-loader‘
        ]
    }
}

简单来理解上面的配置，test项使用 /\.less$/正则匹配需要处理的模块文件（即 less 后缀的文件），然后交给less-loader来处理，这里的less-loader是个 string，最终会被作为require()的参数来直接使用。

这样 less 文件都会被less-loader处理成对应的 css 文件。

除了直接在webpack.config.js使用 loader 的方式之外，还可以在对应的 JavaScript 文件中使用 loader：

Loader 的参数

给 loader 传参的方式有两种：

1. 通过options传入
2. 通过query的方式传入：

// config内写法，通过 options 传入
module: {
    rules: [{
        test: /\.html$/,
        use: [{
            loader: ‘html-loader‘,
            options: {
                minimize: true,
                removeComments: false,
                collapseWhitespace: false
            }
        }]
    }]
}
// config内写法，通过 query 传入
module: {
    rules: [{
      test: /\.html$/,
      use: [ {
        loader: ‘html-loader?minimize=true&removeComments=false&collapseWhitespace=false‘,
      }]
    }]
}

Loader 的解析顺序

对于一些类型的模块，简单配置一个 loader 是不能够满足需求的，例如 less 模块类型的文件，只配置了 less-loader 仅仅是将 Less 语法转换成了 CSS 语法，但是 JS 还是不能直接使用，所以还需要添加css-loader来处理，这时候就需要注意 Loader 的解析顺序了。前面已经提到了，Webpack 的 Loader 解析顺序是从右到左（从后到前）的，即:

// 数组写法，从后到前
module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    {
                        loader: ‘style-loader‘
                    },
                    {
                        loader: ‘css-loader‘
                    },
                    {
                        loader: ‘less-loader‘
                    }
                ]
            }
        ]
    }
};

如果需要调整 Loader 的执行顺序，可以使用enforce，enforce取值是pre|post，pre表示把放到最前，post是放到最后：

use: [
    {
        loader: ‘babel-loader‘,
        options: {
            cacheDirectory: true
        },
        // enforce:‘post‘ 的含义是把该 loader 的执行顺序放到最后
        // enforce 的值还可以是 pre，代表把 loader 的执行顺序放到最前
        enforce: ‘post‘
    }
];

plugin 插件

plugin是Webpack 的重要组成部分，通过plugin可以解决loader解决不了的问题。

例如有Gzip压缩

Webpack 本身就是有很多插件组成的，所以内置了很多插件，我们可以直接通过webpack对象的属性来直接使用，例如：webpack.optimize.UglifyJsPlugin

module.exports = {
    //....
    plugins: [
        // 压缩js
        new webpack.optimize.UglifyJsPlugin();
    ]
}

除了内置的插件，我们也可以通过 NPM 包的方式来使用插件：

// 非默认的插件
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
module.exports = {
    //....
    plugins: [
        // 导出css文件到单独的内容
        new ExtractTextPlugin({
            filename: ‘style.css‘
        })
    ]
};

Tips：loader面向的是解决某个或者某类模块的问题，而plugin面向的是项目整体，解决的是loader解决不了的问题。

小结

在本小节中，我们讲解了Webpack 相关的除entry和output外的基础配置项，这里总结下项目经常配置的并且比较重要的配置项列表，供大家复习本小节内容：

resolve：模块依赖查找相关的配置

• resolve.extensions：可以省略解析扩展名的配置，配置太多反而会导致webpack 解析效率下降；
• resolve.alias：通过设置 alias 可以帮助 webpack 更快查找模块依赖，精简代码书写时相对路径的书写；

module.rules：loader 相关的配置，每个 rule 重要的内容有：

• test：正则匹配需要处理的模块文件；
• use：loader 数组配置，内部有loader和options；
• include：包含；
• exclude：排除；

plugins：插件。

webpack入门篇