下定决心,就勇往直前。

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 中的,而且 testuse 这两个属性是必须的。

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

4.插件(plugin)

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

5.模式(mode)

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

6.浏览器兼容性

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

2.入口(entry)


1.配置语法

用法: entry: string|Array

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

上面这只是简写,完整的写法如下:

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

2.对象语法

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

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

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

3.常见场景

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

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

3.输出(output)

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

1.用法

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

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

2.多入口起点配置

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.高级进阶

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.用法

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

或者通过CLI参数传递

webpack --mode=production

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

5.loader

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

1.使用示例

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

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有3种方式:

  • 1.配置(推荐):在webpack中指定loader

  • 2.内联:在每个import语句显式指定loader

  • 3.CLI:在shell命令中指定它们

6.插件

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

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

7.配置

基本配置:

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中有模块专门对页面更新做了监听,只要代码修改就对页面中修改的那块做出更新,当然实现中肯定加入了很多小细节。

完!