webpack基础介绍和使用方法

深藏阁楼爱情的钟 2023-10-14 12:42 15阅读 0赞

# 1.webpack是什么？ #

\-`webpack 是代码编译工具，有入口、出口、loader 和插件。`

*  webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。
 *  当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

# 2.webpack的工作原理? #

*  WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

# 3.webpack打包原理? #

*  把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。
 *  按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

# 4.webpack的核心概念 #

## 1.Entry ##

*  入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js。

## 2.output ##

*  出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist。

## 3.Module ##

*  模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

## 4.Chunk ##

*  代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

## 5.Loader ##

*  模块转换器，用于把模块原内容按照需求转换成新内容。

## 6.Plugin ##

*  扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

# 5.Webpack的基本功能有哪些？ #

*  代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等。
 *  文件优化：压缩 JavaScript、CSS、html 代码，压缩合并图片等。
 *  代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
 *  模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件。
 *  自动刷新：监听本地源代码的变化，自动构建，刷新浏览器。
 *  代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过。
 *  自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

# 6.gulp/grunt 与 webpack的区别是什么? #

*  三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。
 *  类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。
 *  webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

# 7.webpack是解决什么问题而生的? #

*  如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less, sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。

# 8.了解如何利用 Webpack 将 Bootstrap 应用到项目中。 #

## 安装 Bootstrap ##

利用 npm 安装 bootstrap 并将其作为 Node.js 模块使用。

## 导入（import） JavaScript 插件 ##

通过将以下代码添加到你的应用程序的入口文件中（通常是 index.js 或 app.js 文件）从而导入（import） Bootstrap 的 JavaScript 插件：

import 'bootstrap';

另外，你还可以根据需要 分别导入（import）独立的插件 ：

import 'bootstrap/js/dist/util';
    import 'bootstrap/js/dist/alert';

*  Bootstrap 依赖 jQuery 和 Popper， 这两个依赖项在 peerDependencies 属性中已经明确指定。
 *  这意味着你必须确保使用 npm install --save jquery popper.js 命令将这两个依赖项添加到 你的 package.json 文件中。

## 导入（import）样式 ##

### 导入（import）预编译的 Sass 文件 ###

要充分发挥 Bootstrap 的潜能并根据需要对其进行定制，你需要将 Bootstrap 的源文件添加到你的项目的构建流程中。

*  首先，创建你自己的 \_custom.scss 文件，并将其用于覆盖 Bootstrap 内置的可修改变量。然后，在你自己的 Sass 主文件中导入（import）该文件，最后导入 Bootstrap 主文件：

@import "custom";
    @import "~bootstrap/scss/bootstrap";

*  为了编译 Bootstrap，请确保安装并使用了编译 Bootstrap 所需的加载器（loader）： sass-loader、postcss-loader 和 Autoprefixer。在最少的配置情况下，你的 webpack 配置文件应当包含类似下面的规则：

{
        
      test: /\.(scss)$/,
      use: [{
        
        loader: 'style-loader', // inject CSS to page
      }, {
        
        loader: 'css-loader', // translates CSS into CommonJS modules
      }, {
        
        loader: 'postcss-loader', // Run postcss actions
        options: {
        
          plugins: function () {
         // postcss plugins, can be exported to postcss.config.js
            return [
              require('autoprefixer')
            ];
          }
        }
      }, {
        
        loader: 'sass-loader' // compiles Sass to CSS
      }]
    },
    ...

### 导入（import）编译后的 CSS 文件 ###

另外，你还可以将以下代码行添加到项目的入口文件中从而直接使用 Bootstrap 的现成的 CSS 文件：

import 'bootstrap/dist/css/bootstrap.min.css';

在这种情况下，你可以直接使用现有的针对 css 文件的规则，从而无需对 webpack 的配置文件做任何特殊的修改。并且，你不再需要 sass-loader，只需 style-loader 和 css-loader 即可。

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

[参考][Link 1]

[Link 1]: https://v4.bootcss.com/docs/getting-started/webpack/