Webpack基础 | Rio的个人博客

说明

webpack基础介绍，entry与output，plugins，loader，笔记总结

# 什么是Webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

vue、react等框架以及模块化编程让项目更加清晰、更易维护，而对于页面的加载来说，模块文件多就意味着请求数多，网页的加载速度就慢，框架通常有自有的语法及文件类型。webpack通过loader去处理非 JavaScript 文件，将模块打包成一个或多个静态资源文件（js、css、jpg|png等等）并进行优化

安装Webpack：npm install webpack webpack-cli --save-dev

# entry与output

entry指定webpack的打包入口，从入口开始查找依赖，递归形成依赖树，最终遍历这些依赖，生成打包后的文件。与之对应，output指定webpack 在哪里输出它所创建的打包文件，以及如何命名这些文件。

webpack打包分为单入口和多入口。单入口。entry为入口文件相对地址的字符串，output为一个对象，有path和filename两个字段。多入口：entry为一个对象，每一个字段为一个入口。output的filename为"[name].js",通过占位符来确保输出的多个js文件与入口js文件一一对应。

const path = require('path')
module.exports = {
  // 单入口
  entry: './src/index.js',
  // 单出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build'), // 绝对路径
  },
}
-------------------------------------------------
module.exports = {
  // 多入口
  entry: {
      index1: './src/index1.js',
      index2: './src/index2.js',
  },
  // 多出口
  output: {
    // 其中[]是占位符
    filename: '[name]_bundle.js',
    path: path.resolve(__dirname, './build'), // 绝对路径
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# loader

webpack 自身只理解 javascript和json，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，并添加到依赖图中进行打包处理。loader本身是一个函数，接受源文件作为参数，并返回转换的结果。

loader的配置是在module对象的rules字段。rules是一个数组，可以配置多个loader。每个loader 有两个属性：

test，用于匹配出应该被对应的 loader 进行转换的某个或某些文件，值为正则表达式。
use，表示应该使用哪个 loader对源文件进行转换。

一个匹配规则中可以配置使用多个 loader，即一个模块文件可以经过多个 loader 的转换处理，loader执行的顺序是从右往左

日常开发中，常用的loader有：

babel-loader: 转换es6、es7等JS新特性语法
css-loader: 支持.css文件的加载和解析
less-loader: 转换less文件成css(类似的有sass-loader/stylus-loader)
style-loader: 生成一个内容为最终解析完的css代码的style标签，并放到head标签里
postcss-loader: 进一步处理css文件，比如添加浏览器前缀，压缩css等
url-loader: 处理图片、字体图标等文件

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

1
2
3
4
5
6
7
8

# plugins

loader对源文件进行预处理，而plugin作用到构建打包的整个过程，用于扩展 Webpack 功能,比如文件压缩、资源管理等等。

plugin的配置是在plugins数组中，需要使用某个插件就将它添加到plugins数组。

平时用的比较多的plugin有：

html-webpack-plugin：创建html文件去承载输出的bundle
uglifyjs-webpack-plugin: 压缩js代码。因为其不能压缩es6的代码文件所以使用该插件需要用babel-loader将es6转换成es5
optimize-css-assets-webpack-plugin：压缩css文件,优化css结构

# mode

mode用来指定当前的构建环境，有production、development、none三种情况，默认值是production。设置mode可以使用webpack的内置函数，如下。

自定义环境

使用cross-env，它的作用就是能跨环境传递环境参数，也就是能同时兼容mac、windows、linux。npm i cross-env

{
  "scripts": {
    "dev": "cross-env MODE=development webpack",
    "staging": "cross-env MODE=staging webpack",
    "build": "cross-env MODE=production webpack",
    "my": "webpack --config xxx.config.js --env development",
  }
}

// webpack.config.js
console.log("process.env.MODE=", process.env.MODE);

module.exports = (env, argv) => {
  if (process.env.MODE === "development") {
    config.mode = "development";
  } else {
    config.mode = "production";
  }

  return config;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# resolve

用于配置模块路径解析规则，可用于帮助 Webpack 更精确、高效地找到指定模块

比如配置别名：创建 import 或 require 的别名，来确保模块引入变得更简单。

resolve:{
    alias:{
        //告诉webpack代码中@符号表示src这一层目录
        '@':path.join(__dirname,'./src/')
    },
    // 扩展名    
    extensions: ['.js', '.jsx', '.ts']
},

1
2
3
4
5
6
7
8

# externals

用于声明外部资源，Webpack 会直接忽略这部分资源，跳过这些资源的解析、打包操作

比如防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies) 。

// 排除某些不需要进行打包的包
externals: {
    axios: "axios"
}

1
2
3
4

# 文件指纹

文件指纹是一串哈希符，通常是加载文件名后面，用于标识文件，做版本的管理。比如项目上线后，需要修改一些东西，只需要发布修改过的文件，对于没有修改过的文件，用户在访问的时候，依旧可以使用浏览器缓存，加速页面渲染。

webpack中的文件指纹有三种：

hash：和整个项目的构建相关，所有文件共用一个hash值，任何文件有修改，项目的hash值就会更改，没有实现缓存的效果。
chunkhash：根据不同的入口文件(entry)进行依赖文件解析、构建对应的chunk，生成对应的chunkhash值
contenthash: 由文件内容产生的hash值，内容不同产生的contenthash值也不一样。

根据不同的文件类型一般选择不同的文件指纹策略，通常情况下：

JS文件采用[chunkhash]文件指纹策略
CSS文件采用[contenthash]文件指纹策略
图片资源采用[hash]文件指纹策略

output: {
   path: path.join(__dirname,"/dist"),
   filename: "js/bundle.[chunkhash:6].js"
}

1
2
3
4
5

# 参考

webpack由浅入深系列（一） - 掘金 (juejin.cn) (opens new window)

【webpack系列】从核心概念到上手配置 - 掘金 (juejin.cn) (opens new window)

【webpack系列】从基础配置到掌握进阶用法 - 掘金 (juejin.cn) (opens new window)

webpack由浅入深系列（二） - 掘金 (juejin.cn) (opens new window)

webpack入门之开发环境(mode、dev-server、devtool) - 掘金 (juejin.cn) (opens new window)