从今天开始，学习Webpack，减少对脚手架的依赖(下)

汪图南
5,256 阅读18分钟

问：这篇文章适合哪些人？
答：适合没接触过Webpack或者了解不全面的人。

问：这篇文章的目录怎么安排的？
答：先介绍背景，由背景引入Webpack的概念，进一步介绍Webpack基础、核心和一些常用配置案例、优化手段，Webpack的plugin和loader确实非常多，短短2w多字还只是覆盖其中一小部分。

问：这篇文章的出处？
答：此篇文章知识来自付费视频(链接在文章末尾)，文章由自己独立撰写，已获得讲师授权并首发于掘金

上一篇：从今天开始，学习Webpack，减少对脚手架的依赖(上)

如果你觉得写的不错，请给我点一个star，原博客地址：原文地址

PWA配置

PWA全称Progressive Web Application(渐进式应用框架)，它能让我们主动缓存文件，这样用户离线后依然能够使用我们缓存的文件打开网页，而不至于让页面挂掉，实现这种技术需要安装workbox-webpack-plugin插件。

如果你的谷歌浏览器还没有开启支持PWA，请开启它再进行下面的测试。

安装插件

$ npm install workbox-webpack-plugin -D

webpack.config.js文件配置

// PWA只有在线上环境才有效，所以需要在webpack.prod.js文件中进行配置
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const prodConfig = {
  // 其它配置
  plugins: [
    new MiniCssExtractPlugin({}),
    new WorkboxWebpackPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ]
}
module.exports = merge(commonConfig, prodConfig);

以上配置完毕后，让我们使用npm run build打包看一看生成了哪些文件，dist目录的打包结果如下：

|-- dist
|   |-- index.html
|   |-- main.f28cbac9bec3756acdbe.js
|   |-- main.f28cbac9bec3756acdbe.js.map
|   |-- precache-manifest.ea54096f38009609a46058419fc7009b.js
|   |-- service-worker.js

我们可以代码块高亮的部分，多出来了precache-manifest.xxxxx.js文件和service-worker.js，就是这两个文件能让我们实现PWA。

改写index.js

需要判断浏览器是否支持PWA，支持的时候我们才进行注册，注册的.js文件为我们打包后的service-worker.js文件。

console.log('hello,world');
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then((register) => {
    console.log('注册成功');
  }).catch(error => {
    console.log('注册失败');
  })
}

PWA实际效果

在npm run dev后，我们利用webpack-dev-server启动了一个小型的服务器，然后我们停掉这个服务器，刷新页面，PWA的实际结果如下图所示

WebpackDevServer请求转发

在这一小节中，我们要学到的技能有：

  • 如何进行接口代理配置
  • 如何使用接口路径重写
  • 其他常见配置的介绍

假设我们现在有这样一个需求：我有一个URL地址(http://www.dell-lee.com/react/api/header.json)，我希望我请求的时候，请求的地址是/react/api/header.json，能有一个什么东西能自动帮我把请求转发到http://www.dell-lee.com域名下，那么这个问题该如何解决呢？可以使用 Webpack 的webpack-dev-server这个插件来解决，其中需要配置proxy属性。

如何进行接口代理配置

既然我们要做请求，那么安装axios来发请求再合适不过了，使用如下命令安装axios:

$ npm install axios --save-dev

因为我们的请求代理只能在开发环境下使用，线上的生产环境，需要走其他的代理配置，所以我们需要在webpack.dev.js中进行代理配置

const devConfig = {
  // 其它配置
  devServer: {
    contentBase: './dist',
    open: false,
    port: 3000,
    hot: true,
    hotOnly: true,
    proxy: {
      '/react/api': {
        target: 'http://www.dell-lee.com'
      }
    }
  }
}

以上配置完毕后，我们在index.js文件中引入axios模块，再做请求转发。

import axios from 'axios';

axios.get('/react/api/header.json').then((res) => {
  let {data,status} = res;
  console.log(data);
})

使用npm run dev后， 我们可以在浏览器中看到，我们已经成功请求到了我们的数据。

如何使用接口路径重写

现在依然假设有这样一个场景：http://www.dell-lee.com/react/api/header.json这个后端接口还没有开发完毕，但后端告诉我们可以先使用http://www.dell-lee.com/react/api/demo.json 这个测试接口，等接口开发完毕后，我们再改回来。解决这个问题最佳办法是，代码中的地址不能变动，我们只在proxy代理中处理即可，使用pathRewrite属性进行配置。

const devConfig = {
  // 其它配置
  devServer: {
    contentBase: './dist',
    open: false,
    port: 3000,
    hot: true,
    hotOnly: true,
    proxy: {
      '/react/api': {
        target: 'http://www.dell-lee.com',
        pathRewrite: {
          'header.json': 'demo.json'
        }
      }
    }
  }
}

同样，我们打包后在浏览器中可以看到，我们的测试接口的数据已经成功拿到了。

其他常见配置的含义

转发到https： 一般情况下，不接受运行在https上，如果要转发到https上，可以使用如下配置

module.exports = {
  //其它配置
  devServer: {
    proxy: {
      '/react/api': {
        target: 'https://www.dell-lee.com',
        secure: false
      }
    }
  }
}

跨域： 有时候，在请求的过程中，由于同源策略的影响，存在跨域问题，我们需要处理这种情况，可以如下进行配置。

module.exports = {
  //其它配置
  devServer: {
    proxy: {
      '/react/api': {
        target: 'https://www.dell-lee.com',
        changeOrigin: true,
      }
    }
  }
}

代理多个路径到同一个target： 代理多个路径到同一个target，可以如下进行配置

module.exports = {
  //其它配置
  devServer: {
    proxy: [{
      context: ['/vue/api', '/react/api'],
      target: 'http://www.dell-lee.com'
    }]
  }
}

多页打包

现在流行的前端框架都推行单页引用(SPA)，但有时候我们不得不兼容一些老的项目，他们是多页的，那么如何进行多页打包配置呢？ 现在我们来思考一个问题：多页运用，即 多个入口文件+多个对应的html文件 ，那么我们就可以配置 多个入口+配置多个html-webpack-plugin 来进行。

场景：假设现在我们有这样三个页面：index.html, list.html, detail.html，我们需要配置三个入口文件，新建三个.js文件。

在webpack.common.js中配置多个entry并使用html-webpack-plugin来生成对应的多个.html页面。 HtmlWebpackPlugin参数说明：

  • template：代表以哪个HTML页面为模板
  • filename：代表生成页面的文件名
  • chunks：代表需要引用打包后的哪些.js文件
module.exports = {
  // 其它配置
  entry: {
    index: './src/index.js',
    list: './src/list.js',
    detail: './src/detail.js',
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      chunks: ['index']
    }),
    new htmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'list.html',
      chunks: ['list']
    }),
    new htmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'detail.html',
      chunks: ['detail']
    }),
    new cleanWebpackPlugin()
  ]
}

在src目录下新建三个.js文件，名字分别是：index.js，list.js和detail.js，它们的代码如下：

// index.js代码
document.getElementById('root').innerHTML = 'this is index page!'

// list.js代码
document.getElementById('root').innerHTML = 'this is list page!'

// detail.js代码
document.getElementById('root').innerHTML = 'this is detail page!'

运行npm run build进行打包：

$ npm run build

打包后的dist目录：

|-- dist
|   |-- detail.dae2986ea47c6eceecd6.js
|   |-- detail.dae2986ea47c6eceecd6.js.map
|   |-- detail.html
|   |-- index.ca8e3d1b5e23e645f832.js
|   |-- index.ca8e3d1b5e23e645f832.js.map
|   |-- index.html
|   |-- list.5f40def0946028db30ed.js
|   |-- list.5f40def0946028db30ed.js.map
|   |-- list.html

随机选择list.html在浏览器中运行，结果如下：

思考：现在只有三个页面，即我们要配置三个入口+三个对应的html，如果我们有十个入口，那么我们也要这样做重复的劳动吗？有没有什么东西能帮助我们自动实现呢？答案当然是有的！

我们首先定义一个makeHtmlPlugins方法，它接受一个 Webpack 配置项的参数configs，返回一个plugins数组

const makeHtmlPlugins = function (configs) {
  const htmlPlugins = []
  Object.keys(configs.entry).forEach(key => {
    htmlPlugins.push(
      new htmlWebpackPlugin({
        template: 'src/index.html',
        filename: `${key}.html`,
        chunks: [key]
      })
    )
  })
  return htmlPlugins
}

通过调用makeHtmlPlugins方法，它返回一个html的plugins数组，把它和原有的plugin进行合并后再复制给configs

configs.plugins = configs.plugins.concat(makeHtmlPlugins(configs));
module.exports = configs;

以上配置完毕后，打包结果依然还是一样的，请自行测试，以下是webpack.commom.js完整的代码：

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizaCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const configs = {
  entry: {
    index: './src/index.js',
    list: './src/list.js',
    detail: './src/detail.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { 
            loader: miniCssExtractPlugin.loader,
            options: {
              hmr: true,
              reloadAll: true
            }
          },
          'css-loader'
        ]
      },
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: [
          {
            loader: "babel-loader"
          },
          {
            loader: "imports-loader?this=>window"
          }
        ] 
      }
    ]
  },
  plugins: [
    new cleanWebpackPlugin(),
    new miniCssExtractPlugin({
      filename: '[name].css'
    }),
    new webpack.ProvidePlugin({
      '$': 'jquery',
      '_': 'lodash'
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    minimizer: [
      new optimizaCssAssetsWebpackPlugin()
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname,'../dist')
  }
}
const makeHtmlPlugins = function (configs) {
  const htmlPlugins = []
  Object.keys(configs.entry).forEach(key => {
    htmlPlugins.push(
      new htmlWebpackPlugin({
        template: 'src/index.html',
        filename: `${key}.html`,
        chunks: [key]
      })
    )
  })
  return htmlPlugins
}
configs.plugins = configs.plugins.concat(makeHtmlPlugins(configs))
module.exports = configs

如何打包一个库文件(Library)

在上面所有的 Webpack 配置中，几乎都是针对业务代码的，如果我们要打包发布一个库，让别人使用的话，该怎么配置？在下面的几个小节中，我们将来讲一讲该怎么样打包一个库文件，并让这个库文件在多种场景能够使用。

创建一个全新的项目

步骤：

  • 创建library项目
  • 使用npm init -y进行配置package.json
  • 新建src目录，创建math.js文件、string.js文件、index.js文件
  • 根目录下创建webpack.config.js文件
  • 安装webpack、webpack-cli:::

按上面的步骤走完后，你的目录大概看起来是这样子的：

|-- src
|   |-- index.js
|   |-- math.js
|   |-- string.js
|-- webpack.config.js
|-- package.json

初始化package.json

// 初始化后，改写package.json
{
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

创建src目录，并添加文件

在src目录下新建math.js，它的代码是四则混合运算的方法，如下：

export function add(a, b) {
  return a + b;
}
export function minus(a, b) {
  return a - b;
}
export function multiply(a, b) {
  return a * b;
}
export function division(a, b) {
  return a / b;
}

在src目录下新建string.js，它有一个join方法，如下：

export function join(a, b) {
  return a + '' + b;
}

在src目录下新建index.js文件，它引用math.js和string.js并导出，如下：

import * as math from './math';
import * as string from './string';

export default { math, string };

添加webpack.config.js

因为我们是要打包一个库文件，所以mode只配置为生产环境(production)即可。

在以上文件添加完毕后，我们来配置一下webpack.config.js文件，它的代码非常简单，如下：

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'library.js',
    path: path.resolve(__dirname, 'dist')
  }
}

安装Webpack

因为涉及到 Webpack 打包，所以我们需要使用npm instll进行安装：

$ npm install webpack webpack-cli -D

进行第一次打包

使用npm run build进行第一次打包，在dist目录下会生成一个叫library.js的文件，我们要测试这个文件的话，需要在dist目录下新建index.html

$ npm run build
$ cd dist
$ touch index.html

在index.html中引入library.js文件：

<script src="./library.js"></script>

至此，我们已经基本把项目目录搭建完毕，现在我们来考虑一下，可以在哪些情况下使用我们打包的文件：

  • 使用ES Module语法引入，例如import library from 'library'
  • 使用CommonJS语法引入，例如const library = require('library')
  • 使用AMD、CMD语法引入，例如require(['library'], function() {// todo})
  • 使用script标签引入，例如<script src="library.js"></script>

针对以上几种使用场景，我们可以在output中配置library和libraryTarget属性(注意：这里的library和libraryTarget和我们的库名字library.js没有任何关系，前者是Webpack固有的配置项，后者只是我们随意取的一个名字) 

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    library: 'library',
    libraryTarget: 'umd'
  }
}

配置属性说明：

  • library：这个属性指，我们库的全局变量是什么，类似于jquery中的$符号
  • libraryTarget: 这个属性指，我们库应该支持的模块引入方案，umd代表支持ES Module、CommomJS、AMD以及CMD

在配置完毕后，我们再使用npm run build进行打包，并在浏览器中运行index.html，在console控制台输出library这个全局变量，结果如下图所示:

以上我们所写的库非常简单，在实际的库开发过程中，往往需要使用到一些第三方库，如果我们不做其他配置的话，第三方库会直接打包进我们的库文件中。

如果用户在使用我们的库文件时，也引入了这个第三方库，就造成了重复引用的问题，那么如何解决这个问题呢？可以在webpack.config.js文件中配置externals属性。

在string.js文件的join方法中，我们使用第三方库lodash中的_join()方法来进行字符串的拼接。

import _ from 'lodash';
export function join(a, b) {
  return _.join([a, b], ' ');
}

在修改完毕string.js文件后，使用npm run build进行打包，发现lodash直接打包进了我们的库文件，造成库文件积极臃肿，有70.8kb。

$ npm run build
Built at: 2019-04-05 00:47:25
     Asset      Size  Chunks             Chunk Names
library.js  70.8 KiB       0  [emitted]  main

针对以上问题，我们可以在webpack.config.js中配置externals属性，更多externals的用法请点击externals

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  externals: ['lodash'],
  output: {
    filename: 'library.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'library',
    libraryTarget: 'umd'
  }
}

配置完externals后，我们再进行打包，它的打包结果如下，我们可以看到我们的库文件又变回原来的大小了，证明我们的配置起作用了。

$ npm run build
Built at: 2019-04-05 00:51:22
     Asset      Size  Chunks             Chunk Names
library.js  1.63 KiB       0  [emitted]  main

如何发布并使用我们的库文件

在打包完毕后，我们如何发布我们的库文件呢，以下是发布的步骤：

  • 注册npm账号
  • 修改package.json文件的入口，修改为："main": "./dist/library.js"
  • 运行npm adduser添加账户名称
  • 运行npm publish命令进行发布
  • 运行npm install xxx来进行安装

为了维护npm仓库的干净，我们并未实际运行npm publish命令，因为我们的库是无意义的，发布上去属于垃圾代码，所以请自行尝试发布。另外自己包的名字不能和npm仓库中已有的包名字重复，所以需要在package.json中给name属性起一个特殊一点的名字才行，例如"name": "why-library-2019"

TypeScript配置

随着TypeScript的不断发展，相信未来使用TypeScript来编写 JS 代码将变成主流形式，那么如何在 Webpack 中配置支持TypeScript呢？可以安装ts-loader和typescript来解决这个问题。

新建一个项目webpack-typescript

新创建一个项目，命名为webpack-typescript，并按如下步骤处理：

  • 使用npm init -y初始化package.json文件，并在其中添加build Webpack打包命令
  • 新建webpack.config.js文件，并做一些简单配置，例如entry、output等
  • 新建src目录，并在src目录下新建index.ts文件
  • 新建tsconfig.json文件，并做一些配置
  • 安装webpack和webpack-cli
  • 安装ts-loader和typescript

按以上步骤完成后，项目目录大概如下所示：

|-- src
|   |-- index.ts
|-- tsconfig.json
|-- webpack.config.js
|-- package.json

在package.json中添加好打包命令命令：

"scripts": {
  "build": "webpack"
},

接下来我们需要对webpack.config.js做一下配置：

const path = require('path');
module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)?$/,
        use: {
          loader: 'ts-loader'
        }
      }
    ]
  },
  entry: {
    main: './src/index.ts'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

在tsconfig.json里面进行typescript的相关配置，配置项的说明如下

  • module: 表示我们使用ES6模块
  • target: 表示我们转换成ES5代码
  • allowJs: 允许我们在.ts文件中通过import语法引入其他.js文件
{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES5",
    "allowJs": true
  }
}

在src/index.ts文件中书写TypeScript代码，像下面这样

class Greeter {
  greeting: string
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return 'hello, ' + this.greeting;
  }
}

let greeter = new Greeter('why');
console.log(greeter.greet());

打包测试

  • 运行npm run build进行打包
  • 在生成dist目录下，新建index.html，并引入打包后的main.js文件
  • 在浏览器中运行index.html

使用其他模块的类型定义文件

如果我们要使用lodash库，必须安装其对应的类型定义文件，格式为@types/xxx

安装lodash对应的typescript类型文件：

$ npm install lodash @types/lodash -D

安装完毕后，我们在index.ts中引用lodash，并使用里面的方法：

import * as _ from 'lodash'

class Greeter {
  greeting: string
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return _.join(['hello', this.greeting], '**');
  }
}

let greeter = new Greeter('why');
console.log(greeter.greet());

打包测试

使用npm run build，在浏览器中运行index.html，结果如下：

Webpack性能优化

打包分析

在进行 Webpack 性能优化之前，如果我们知道我们每一个打包的文件有多大，打包时间是多少，它对于我们进行性能优化是很有帮助的，这里我们使用webpack-bundle-analyzer来帮助我们解决这个问题。

首先需要使用如下命令去安装这个插件：

$ npm install webpack-bundle-analyzer --save-dev

安装完毕后，我们需要在webpack.prod.js文件中做一点小小的改动：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const prodConfig = {
  // 其它配置项
  mode: 'production',
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

配置完毕后，我们运行npm run build命令来查看打包分析结果，以下打包结果仅供参考：

缩小文件的搜索范围

首先我们要弄明白 Webpack 的一个配置参数(Resolve)的作用：它告诉了 Webpack 怎么去搜索文件，它同样有几个属性需要我们去理解：

  • extensions：它告诉了 Webpack 当我们在导入模块，但没有写模块的后缀时应该如何去查找模块。
  • mainFields：它告诉了 Webpack 当我们在导入模块，但并没有写模块的具体名字时，应该如何去查找这个模块。
  • alias：当我们有一些不得不引用的第三方库或者模块的时候，可以通过配置别名，直接引入它的.min.js文件，这样可以库内的直接解析
  • 其它include、exclude、test来配合loader进行限制文件的搜索范围

extensions参数

就像上面所说的那样，extensions它告诉了 Webpack 当我们在导入模块，但没有写模块的后缀时，应该如何去查找模块。这种情况在我们开发中是很常见的，一个情形可能如下所示：

// 书写了模块后缀
import main from 'main.js'

// 没有书写模块后缀
import main from 'main'

像上面那样，我们不写main.js的.js后缀，是因为 Webpack 会默认帮我们去查找一些文件，我们也可以去配置自己的文件后缀配置：

extensions参数应尽可能只配置主要的文件类型，不可为了图方便写很多不必要的，因为每多一个，底层都会走一遍文件查找的工作，会损耗一定的性能。 

module.exports = {
  // 其它配置
  resolve: {
    extensions: ['.js', '.json', '.vue']
  }
}

如果我们像上面配置后，我们可以在代码中这样写：

// 省略 .vue文件扩展
import BaseHeader from '@/components/base-header';

// 省略 .json文件扩展
import CityJson from '@/static/city';

mainFields参数

mainFields参数主要应用场景是，我们可以不写具体的模块名称，由 Webpack 去查找，一个可能的情形如下:

// 省略具体模块名称
import BaseHeader from '@components/base-header/';

// 以上相当于这一段代码
import BaseHeader from '@components/base-header/index.vue';
// 或者这一段
import BaseHeader from '@components/base-header/main.vue';

我们也可以去配置自己的mainFields参数：

同extensions参数类似，我们也不建议过多的配置mainFields的值，原因如上。 

module.exports = {
  // 其它配置
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    mainFields: ['main', 'index']
  }
}

alias参数

alias参数更像一个别名，如果你有一个目录很深、文件名很长的模块，为了方便，配置一个别名这是很有用的；对于一个庞大的第三方库，直接引入.min.js而不是从node_modules中引入也是一个极好的方案，一个可能得情形如下：

通过别名配置的模块，会影响Tree Shaking，建议只对整体性比较强的库使用，像lodash库不建议通过别名引入，因为lodash使用Tree Shaking更合适。 

// 没有配置别名之前
import main from 'src/a/b/c/main.js';
import React from 'react';

// 配置别名之后
import main from 'main.js';
import React from 'react';

// 别名配置
const path = require('path');
module.exports = {
  // 其它配置
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    mainFields: ['main', 'index'],
    alias: {
      main: path.resolve(__dirname, 'src/a/b/c'),
      react: path.resolve(__dirname, './node_modules/react/dist/react.min.js')
    }
  }
}

Tree Shaking去掉冗余的代码

Tree Shaking配置我们已经在上面讲过，配置Tree Shaking也很简单。

module.exports = {
  // 其它配置
  optimization: {
    usedExports: true
  }
}

如果你对Tree Shaking还不是特别理解，请点击Tree Shaking阅读更多。

DllPlugin减少第三方库的编译次数

对于有些固定的第三方库，因为它是固定的，我们每次打包，Webpack 都会对它们的代码进行分析，然后打包。那么有没有什么办法，让我们只打包一次，后面的打包直接使用第一次的分析结果就行。答案当然是有的，我们可以使用 Webpack 内置的DllPlugin来解决这个问题，解决这个问题可以分如下的步骤进行：

  • 把第三方库单独打包在一个xxx.dll.js文件中
  • 在index.html中使用xxx.dll.js文件
  • 生成第三方库的打包分析结果保存在xxx.manifest.json文件中
  • 当npm run build时，引入已经打包好的第三方库的分析结果
  • 优化

单独打包第三方库

为了单独打包第三方库，我们需要进行如下步骤：

  • 根目录下生成dll文件夹
  • 在build目录下生成一个webpack.dll.js的配置文件，并进行配置。
  • 在package.json文件中，配置build:dll命令
  • 使用npm run build:dll进行打包

生成dll文件夹：

$ mkdir dll

在build文件夹下生成webpack.dll.js:

$ cd build
$ touch webpack.dll.js

创建完毕后，需要在webpack.dll.js文件中添加如下代码：

const path = require('path');
module.exports = {
  mode: 'production',
  entry: {
    vendors: ['lodash', 'jquery']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]'
  }
}

最后需要在package.json文件中添加新的打包命令：

{
  // 其它配置
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js",
    "build:dll": "webpack --config ./build/webpack.dll.js"
  }
}

使用npm run build:dll打包结果，你的打包结果看起来是下面这样的：

|-- build
|   |-- webpack.common.js
|   |-- webpack.dev.js
|   |-- webpack.dll.js
|   |-- webpack.prod.js
|-- dll
|   |-- vendors.dll.js
|-- src
|   |-- index.html
|   |-- index.js
|-- package.json

引用xxx.dll.js文件

在上一小节中我们成功拿到了xxx.dll.js文件，那么如何在index.html中引入这个文件呢？答案是需要安装add-asset-html-webpack-plugin插件：

$ npm install add-asset-html-webpack-plugin -D

在webpack.common.js中使用add-asset-html-webpack-plugin插件：

const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const configs = {
  // 其它配置
  plugins: [
    new addAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, '../dll/vendors.dll.js')
    })
  ]
}
module.exports = configs;

我们将第三方库全局暴露了一个vendors变量，现引入xxx.dll.js文件结果如下所示：

生成打包分析文件

在webpack.dll.js中使用 Webpack 内置的DllPlugin插件，进行打包分析：

const path = require('path');
const webpack = require('webpack');
module.exports = {
  mode: 'production',
  entry: {
    vendors: ['lodash', 'jquery']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, '../dll/[name].manifest.json')
    })
  ]
}

引用打包分析文件

在webpack.common.js中使用 Webpack 内置的DllReferencePlugin插件来引用打包分析文件：

const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
  // 其它配置
  plugins: [
    new cleanWebpackPlugin(),
    new htmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new addAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, '../dll/vendors.dll.js')
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, '../dll/vendors.manifest.json')
    })
  ]
}

优化

现在我们思考一个问题，我们目前是把lodash和jquery全部打包到了vendors文件中，那么如果我们要拆分怎么办，拆分后又该如何去配置引入？一个可能的拆分结果如下：

const path = require('path');
const webpack = require('webpack');
module.exports = {
  mode: 'production',
  entry: {
    vendors: ['lodash'],
    jquery: ['jquery']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, '../dll/[name].manifest.json')
    })
  ]
}

根据上面的拆分结果，我们需要在webpack.common.js中进行如下的引用配置：

const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const path = require('path');
const configs = {
  // ... 其他配置
  plugins: [
    new cleanWebpackPlugin(),
    new htmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new addAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, '../dll/vendors.dll.js')
    }),
     new addAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, '../dll/jquery.dll.js')
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, '../dll/vendors.manifest.json')
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, '../dll/jquery.manifest.json')
    })
  ]
}
module.exports = configs;

我们可以发现：随着我们引入的第三方模块越来越多，我们不断的要进行 Webpack 配置文件的修改。对于这个问题，我们可以使用Node的核心模块fs来分析dll文件夹下的文件，进行动态的引入，根据这个思路我们新建一个makePlugins方法，它返回一个 Webpack 的一个plugins数组：

const makePlugins = function() {
  const plugins = [
    new cleanWebpackPlugin(),
    new htmlWebpackPlugin({
      template: 'src/index.html'
    }),
  ];

  // 动态分析文件
  const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
  files.forEach(file => {
    // 如果是xxx.dll.js文件
    if(/.*\.dll.js/.test(file)) {
      plugins.push(
        new addAssetHtmlWebpackPlugin({
          filepath: path.resolve(__dirname, '../dll', file)
        })
      )
    }
    // 如果是xxx.manifest.json文件
    if(/.*\.manifest.json/.test(file)) {
      plugins.push(
        new webpack.DllReferencePlugin({
          manifest: path.resolve(__dirname, '../dll', file)
        })
      )
    }
  })
  return plugins;
}
configs.plugins = makePlugins(configs);
module.exports = configs;

使用npm run build:dll进行打包第三方库，再使用npm run build打包，打包结果如下:

本次试验，第一次打包时间为1100ms+，后面的打包稳定在800ms+，说明我们的 Webpack性能优化已经生效。 

|-- build
|   |-- webpack.common.js
|   |-- webpack.dev.js
|   |-- webpack.dll.js
|   |-- webpack.prod.js
|-- dist
|   |-- index.html
|   |-- jquery.dll.js
|   |-- main.1158fa9f961c50aaea21.js
|   |-- main.1158fa9f961c50aaea21.js.map
|-- dll
|   |-- jquery.dll.js
|   |-- jquery.manifest.json
|   |-- vendors.dll.js
|   |-- vendors.manifest.json
|-- src
|   |-- index.html
|   |-- index.js
|-- package.json
|-- postcss.config.js

小结：Webpack 性能优化是一个长久的话题，本章也仅仅只是浅尝辄止，后续会有关于 Webpack 更加深入的解读博客，敬请期待(立个flag)。

编写自己的Loader

在我们使用 Webpack 的过程中，我们使用了很多的loader，那么那些loader是哪里来的？我们能不能写自己的loader然后使用？ 答案当然是可以的，Webpack 为我们提供了一些loader的API，通过这些API我们能够编写出自己的loader并使用。

如何编写及使用自己的Loader

场景: 我们需要把.js文件中，所有出现Webpack is good!，改成Webpack is very good!。实际上我们需要编写自己的loader，所以我们有如下的步骤需要处理：

  • 新建webpack-loader项目
  • 使用npm init -y命令生成package.json文件
  • 创建webpack.config.js文件
  • 创建src目录，并在src目录下新建index.js
  • 创建loaders目录，并在loader目录下新建replaceLoader.js
  • 安装webpack、webpack-cli

按上面的步骤新建后的项目目录如下：

|-- loaders
|   | -- replaceLoader.js
|-- src
|   | -- index.js
|-- webpack.config.js
|-- package.json

首先需要在webpack.config.js中添加下面的代码：

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [path.resolve(__dirname, './loaders/replaceLoader.js')]
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

随后在package.json文件添加build打包命令：

// 其它配置
"scripts": {
  "build": "webpack"
}

接下来在src/index.js文件中添加一行代码：这个文件使用最简单的例子，只是打印一句话。

console.log('Webpack is good!');

最后就是在loader/replaceLoader.js编写我们自己loader文件中的代码：

  • 编写loader时，module.exports是固定写法，并且它只能是一个普通函数，不能写箭头函数(因为需要this指向自身)
  • source是打包文件的源文件内容
const loaderUtils = require('loader-utils');
module.exports = function(source) {
  return source.replace('good', 'very good');
}

使用我们的loader: 要使用我们的loader，则需要在modules中写loader， resolveLoader它告诉了 Webpack 使用loader时，应该去哪些目录下去找，默认是node_modules，做了此项配置后，我们就不用去显示的填写其路径了，因为它会自动去loaders文件夹下面去找。

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  resolveLoader: {
    modules: ['node_modules', './loaders']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{
          loader: 'replaceLoader',
          options: {
            name: 'wanghuayu'
          }
        }]
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

最后我们运行npm run build，在生成的dist目录下打开main.js文件，可以看到文件内容已经成功替换了，说明我们的loader已经使用成功了。

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("console.log('Webpack is very good!');\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });

如何向Loader传参及返回多个值

问题：

  • 我们如何返回多个值？
  • 我们如何向自己的Loader传递参数？

如何返回多个值

Webpack 的 API允许我们使用callback(error, result, sourceMap?, meta?)返回多个值，它有四个参数：

  • Error || Null ：错误类型， 没有错误传递null
  • result ：转换后的结果
  • sourceMap：可选参数，处理分析后的sourceMap
  • meta: 可选参数，元信息

返回多个值，可能有如下情况：

// 第三，第四个参数是可选的。
this.callback(null, result);

如何传递参数

我们知道在使用loader的时候，可以写成如下的形式：

// options里面可以传递一些参数
{
  test: /\.js$/,
  use: [{
    loader: 'replaceLoader',
    options: {
      word: 'very good'
    }
  }]
}

再使用options传递参数后，我们可以使用官方提供的loader-utils来获取options参数，可以像下面这样写：

const loaderUtils = require('loader-utils');
module.exports = function(source) {
  var options = loaderUtils.getOptions(this);
  return source.replace('good', options.word)
}

如何在Loader中写异步代码

在上面的例子中，我们都是使用了同步的代码，那么如果我们有必须异步的场景，该如何实现呢？我们不妨做这样的假设，先写一个setTimeout：

const loaderUtils = require('loader-utils');
module.exports = function(source) {
  var options = loaderUtils.getOptions(this);
  setTimeout(() => {
    var result = source.replace('World', options.name);
    return this.callback(null, result);
  }, 0);
}

如果你运行了npm run build进行打包，那么一定会报错，解决办法是：使用this.async()主动标识有异步代码：

const loaderUtils = require('loader-utils');
module.exports = function(source) {
  var options = loaderUtils.getOptions(this);
  var callback = this.async();
  setTimeout(() => {
    var result = source.replace('World', options.name);
    callback(null, result);
  }, 0);
}

至此，我们已经掌握了如何编写、如何引用、如何传递参数以及如何写异步代码，在下一小节当中我们将学习如何编写自己的plugin。

编写自己的Plugin

与loader一样，我们在使用 Webpack 的过程中，也经常使用plugin，那么我们学习如何编写自己的plugin是十分有必要的。 场景：编写我们自己的plugin的场景是在打包后的dist目录下生成一个copyright.txt文件

plugin基础

plugin基础讲述了怎么编写自己的plugin以及如何使用，与创建自己的loader相似，我们需要创建如下的项目目录结构：

|-- plugins
|   -- copyWebpackPlugin.js
|-- src
|   -- index.js
|-- webpack.config.js
|-- package.json

copyWebpackPlugins.js中的代码：使用npm run build进行打包时，我们会看到控制台会输出hello, my plugin这段话。

plugin与loader不同，plugin需要我们提供的是一个类，这也就解释了我们必须在使用插件时，为什么要进行new操作了。 

class copyWebpackPlugin {
  constructor() {
    console.log('hello, my plugin');
  }
  apply(compiler) {

  }
}
module.exports = copyWebpackPlugin;

webpack.config.js中的代码：

const path = require('path');
// 引用自己的插件
const copyWebpackPlugin = require('./plugins/copyWebpackPlugin.js');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // new自己的插件
    new copyWebpackPlugin()
  ]
}

如何传递参数

在使用其他plugin插件时，我们经常需要传递一些参数进去，那么我们如何在自己的插件中传递参数呢？在哪里接受呢？
其实，插件传参跟其他插件传参是一样的，都是在构造函数中传递一个对象，插件传参如下所示：

const path = require('path');
const copyWebpackPlugin = require('./plugins/copyWebpackPlugin.js');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 向我们的插件传递参数
    new copyWebpackPlugin({
      name: 'why'
    })
  ]
}

在plugin的构造函数中调用：使用npm run build进行打包，在控制台可以打印出我们传递的参数值why

class copyWebpackPlugin {
  constructor(options) {
    console.log(options.name);
  }
  apply(compiler) {

  }
}
module.exports = copyWebpackPlugin;

如何编写及使用自己的Plugin

  • apply函数是我们插件在调用时，需要执行的函数
  • apply的参数，指的是 Webpack 的实例
  • compilation.assets打包的文件信息

我们现在有这样一个需求：使用自己的插件，在打包目录下生成一个copyright.txt版权文件，那么该如何编写这样的插件呢？ 首先我们需要知道plugin的钩子函数，符合我们规则钩子函数叫：emit，它的用法如下：

class CopyWebpackPlugin {
  constructor() {
  }
  apply(compiler) {
    compiler.hooks.emit.tapAsync('CopyWebpackPlugin', (compilation, cb) => {
      var copyrightText = 'copyright by why';
      compilation.assets['copyright.txt'] = {
        source: function() {
          return copyrightText
        },
        size: function() {
          return copyrightText.length;
        }
      }
      cb();
    })
  }
}
module.exports = CopyWebpackPlugin;

使用npm run build命名打包后，我们可以看到dist目录下，确实生成了我们的copyright.txt文件。

|-- dist
|   |-- copyright.txt
|   |-- main.js
|-- plugins
|   |-- copyWebpackPlugin.js
|-- src
|   |-- index.js
|-- webpack.config.js
|-- package.json

我们打开copyright.txt文件，它的内容如下：

copyright by why

本篇博客由慕课网视频从基础到实战手把手带你掌握新版Webpack4.0阅读整理而来，观看视频请支持正版。

avatar
文章
阅读
粉丝