这是我参与「第四届青训营」笔记创作活动的第10天

Webpack 知识体系

什么是webpack

webpack可以看做是模块打包器：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（TypeScript,less等），并将其转换和打包为合适的格式供浏览器使用。

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

QB5~F09EF[}OC2MD({3`F]A.png

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

使用webpack

项目初始化

1.首先我们创建一个目录

mkdir webpack-demo && cd webpack-demo

2.初始化项目

 npm init -y

3.下载webpack依赖包和webpack-cli命令行工具

npm install webpack webpack-cli --save-dev

最简单的打包流程

项目目录

-node_modules
-src
-----a.js
-----b.js
-package-lock.json
-package.json
-webpack.config.js

1.创建src文件夹并创建a.js和b.js文件

//a.js
import { name } from './b.js';  
document.write(name);

//b.js
export let name = 'Jack';

2.创建webpack.config.js

// Webpack的配置文件

var path = require('path');  

module.exports = {
  //打包文件的入口起点
  entry: './src/a.js',
  //打包到的地址
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  mode: 'none'
};

3.运行 npx webpack
这时就会多一个dist文件夹，我们打包的文件就在里面,这时我们就完成了最简单的打包流程。

安装loader处理css

webpack自身处理js文件，如果要处理js以外的文件则需要安装loader。
安装：
1.css-loader：运行webpack打包依赖的css
2.style-loader：将css-loader处理后的样式注入到head里面

npm install css-loader style-loader --save-dev

配置webpack.config.js文件

var path = require('path');  
// /Webpack的配置文件
module.exports = {
  //打包文件的入口起点
  entry: './src/a.js',
  //打包到的地址
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  //css处理器
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader']},
    ]
  },
  mode: 'none'
};

src下编写index.css文件并且引入到a.js文件中使用命令 npx webpack打包就成功了

打包文件bundle.js中这行就是css

总结：loader实际上就是针对不同类型的打包文件提供的打包方案。

接入Babel

Babel 是一个工具链是js的一个编译器，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

语法转换

通过 Polyfill 方式在目标环境中添加缺失的特性（通过引入第三方 polyfill 模块，例如 core-js）

源码转换（codemods）

在a.js上随便写点ES6+的语法如class

1.安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

2.写入配置项

var path = require('path');  
// /Webpack的配置文件
module.exports = {
  //打包文件的入口起点
  entry: './src/a.js',
  //打包到的地址
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  //css处理器
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader']},
      { test: /\.js?$/, use: [{loader:'babel-loader',options:{
        presets:[
            ['@babel/preset-env']
        ]
      }
    }
]
}
    ]
  },
  mode: 'none'
};

3.运行 npx webpack 这时bundle.js文件夹中就有了

生成html

1.安装依赖

npm i -D html-webpack-plugin

2.配置Webpack文件

var path = require('path');
//引入  
const HtmlwebpackPlugin = require('html-webpack-plugin'); 
// /Webpack的配置文件
module.exports = {
  //打包文件的入口起点
  entry: './src/a.js',
  //打包到的地址
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  //css处理器
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader']},
      { test: /\.js?$/, use: [{loader:'babel-loader',options:{
        presets:[
            ['@babel/preset-env']
        ]
      }
    }
]
}
]},
  //plugins选项用于以各种方式定义webpack构建过程。webpack附带的各种内置插件，
  //可以通过这个选项，在编译时使用这些插件。
 plugins:[new HtmlwebpackPlugin()],
 mode:'none'
};

3.执行npx webpack

核心流程

webpack的核心流程精简为以下的四个部分

工具线

webpack的配置总览

HMR

Hot Module Replacement --- 模块热替换

作用：当修改代码的时候会里面刷新html页面，大大提高了更新效率。

配置webpack.config.js文件

//Webpack文件文件中加入devServer配置项
devServer:{
    hot:true,
 }

启动方式：npx webpack serve

进阶篇

理解Loader

为了处理非标准JS资源，设计出资源翻译模块 --- Loader(用于将资源翻译为标准JS)

链式调用

less-loader ：实现 less => css 的转换。
css-loader：将css包装成类似module.exports = "${css}" 的内容包装后的内容符合js语法。
style-loader：将css模块包进requirt语句，并在运行的时候调用injectStyle等函数将内容注入到页面的style标签中。

其他特性

特点：

链式调用
支持异步执行
分normal，pitch两种模式

常用Loader

我们常用需要熟练掌握的loader

理解插件

现在的主流工具都设计出了插件架构

image(5).png

插件构建的精髓：对扩展开发，对修改封闭。

甚至webpack很多功能都是基于插件开发的。

想要详细了解插件的话可以参考 webpack插件架构深度讲解zhuanlan.zhihu.com/p/367931462

Webpack 知识体系 | 青训营笔记