下定决心，就勇往直前。

webpack概念学习掌握。

webpack4官方文档

1.webpack是什么？

webpack是一个现代的JavaScript应用程序静态模块打包工具。~~本质上就是一个JS模块打包工具~~

webpack在打包过程中，会构建一个依赖图，也就是在打包的时候webpack会分析文件之间的依赖关系，然后生成一个或多个包。

webpack相关的一些概念

1.入口（entry）

入口起点是指webpack应该使用哪个模块作为构建内部依赖图的开始。默认值是 ./src/index.js，当然这个值你是可以在配置中修改的。

2.输出（output）

输出就是告诉webpack在哪里输出它所创建的包，以及如何命名这些创建的文件。默认值是 ./dist/main.js，其他生成的文件也默认放置在 ./dist 文件夹下。当然你也可以通过指定 output 字段来自定义配置输出路径和文件。

3.loader

webpack本身只能解析JS和JSON文件。loader能让webpack去处理其他类型的文件，并转换成有效的模块。

配置的时候注意 rules 是定义在 module 中的，而且 test 和 use 这两个属性是必须的。

1
2
3
4
5


module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader'}]
  }
};

4.插件（plugin）

插件用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

5.模式（mode）

webpack对不同的模式内置了优化，webpack有development，production和none这三个模式，可以通过设置 mode 参数进行配置。默认值为 production。

6.浏览器兼容性

webpack支持所有符合 ES5 标准的浏览器，不支持IE8及以下版本。webpack 的 import() 和 require.ensure() 需要 Promise。如果想支持旧版浏览器，请在使用这些表达式之前提前加载 polyfill。

2.入口（entry）

1.配置语法

用法： entry: string|Array

1
2
3


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

上面这只是简写，完整的写法如下：

1
2
3
4
5


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

2.对象语法

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

1
2
3
4
5
6


module.exports = {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
};

以上这种定义方法非常方便的可以扩展。

3.常见场景

多页面应用程序配置多入口

1
2
3
4
5
6
7


module.exports = {
    entry: {
        pageOne: './src/pageOne/index.js',
        pageTwo: './src/pageTwo/index.js',
        pageThree: './src/pageThree/index.js'
    }
};

3.输出（output）

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件，注意可以配置多入口，但是只能配置一个 output 。

1.用法

1
2
3
4
5


module.exports = {
    output: {
        filename: 'bundle.js'
    }
};

以上配置的含义是将一个单独的 bundle.js 文件输出到 dist 目录中。

2.多入口起点配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: _dirname + '/dist'
    }
};

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

3.高级进阶

1
2
3
4
5
6


module.exports = {
    output: {
        path: '/home/proj/cdn/assets/[hash]',
        publicPath: 'http://cdn.example.com/assets/[hash]/'
    }
};

4.模式（mode）

提供mode配置选项，告知webpack使用相应配置环境内置优化。

string: 可能的值有 none、development或production(默认)

1.用法

1
2
3


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

或者通过CLI参数传递

1

webpack --mode=production

不同模式下的webpack全量基本配置参考。

5.loader

loader用于对模块源代码进行转换,并提供前端构建步骤的强大方法。

1.使用示例

要使用对应的loader，及必须先安装相对应的loader。例如，让loader告诉webpack加载css文件，或者将TypeScript转换为JavaScript。

1
2
3


npm install --save-dev css-loader

npm install --save-dev ts-loader

然后需要配置webpack对每个css文件使用css-loader，对每个ts文件使用ts-loader。

webpack.config.js配置：

1
2
3
4
5
6
7
8


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

2.使用loader的方式

使用loader有3种方式：

1.配置（推荐）：在webpack中指定loader
2.内联：在每个import语句显式指定loader
3.CLI：在shell命令中指定它们

6.插件

插件的作用是用来解决loader无法实现的事情。

webpack插件本质上是一个具有apply方法的JS对象。

7.配置

基本配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var path = require('path')

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

8.模块

在模块化编程中，开发者将程序的功能拆分成一个个的chunk，并称之为模块。

9.为什么选择webpack

从当下的环境来看，做工程化必须了解webpack和gulp中的一种或者两种都了解，虽然尤大出了vite，但是出来时间还不够久，还没推广开，社区什么的还不成熟，基本没有人敢用到生产上，如果说webpack不行了的话，webpack至少还能撑两年。

IIFE(立即调用函数)解决了大型项目作用域问题。这种方式诞生出了Make，Gulp，Grunt，Broccoli，Brunch等工具。这些工具被称为任务执行器，它们将所有项目拼接在一起。缺点是修改一个文件就必须重新构建整个文件。

10.模块解析

webpack能解析三种路径：

1.绝对路径
2.相对路径
3.模块路径

11.依赖图

任何时候，一个文件依赖于另一个文件，webpack就把此视为文件间有依赖关系。

12.mainifest

webpack构建的应用程序中，有3种代码类型：

1.你或你的团队编写的源码
2.你的源码依赖的第三方代码（依赖包）
3.webpack的runtime和mainifest，管理所有模块的交互。

13.部署目标（target）

因为服务器和浏览器都可以用JS编写，所以webpack提供多种部署方式，你可以在webpack配置中配置target选项来实现。

14.模块热替换

模块热替换，用过Vue的同学应该都知道，就是热更新的功能。

本质就是webpack中有模块专门对页面更新做了监听，只要代码修改就对页面中修改的那块做出更新，当然实现中肯定加入了很多小细节。

完！