How to extract third-party libraries with webpack

This time I will show you how webpack extracts third-party libraries. What are the precautions for webpack to extract third-party libraries? The following is a practical case, let's take a look.

When we use webpack to package, we often want to extract the third-party library separately, use it as a stable version file, and use the browsing cache to reduce the number of requests. There are two commonly used methods to extract third-party libraries

1. CommonsChunkPlugin

2. DLLPlugin

Difference: The first method requires the third-party library to be packaged once every time it is packaged. The second method only packages the project files each time. We only need tocitethe third-party compression packaged for the first time. Just file

CommonsChunkPlugin methodIntroduction

Let’s take vue as an example

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字， app是入口js文件
 bundle: 'app'，
 // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
 vendor: ['vue']
 },
 output: {
  path: dirname + '/bulid/',
 // 文件名称
 filename: '[name].js'
 },
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Then package the generated file and import it into the html file

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

DLLPlugin method introduction

First prepare two files

1. webpack.config.js

2. webpack.dll.config.js

The webpack.dll.config.js file is configured as follows

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 },
 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },
 plugins: [
 new webpack.DllPlugin({
  path: path.join(dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

Then the webpack.config.js file is configured as follows

const webpack = require('webpack')
module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

Then run

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

HTML citation method

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to develop the optimal JS module

Steps to implement webpack express multi-page site development

The above is the detailed content of How to extract third-party libraries with webpack. For more information, please follow other related articles on the PHP Chinese website!