Detailed Explanation of the Correct Posture for Extracting Third-Party Libraries in Webpack

When we use webpack to package, we often want to extract the third-party libraries separately, make them as stable version files, and use browser caching to reduce the number of requests. There are two common methods to extract third-party libraries

1. CommonsChunkPlugin
2. DLLPlugin

Difference: The first method runs and packages the third-party libraries every time, and the second method only packages the project files every time. We just need to refer to the first packaged compressed third-party file

Introduction to CommonsChunkPlugin method

Let's take vue as an example

const vue = require('vue')
{
 entry: {
 // Bundle is the export name of the project files we want to package, app is the entry js file
 bundle: 'app',
 // Vendor is the final file name of the third-party libraries we want to package, the array contains the third-party libraries to be packaged. If it is not in the node_modules directory, you can fill in the specific address of the library
 vendor: ['vue']
 },
 output: {
  path: __dirname + /bulid/','
 // File name
 filename: '[name].js'
 },
 plugins: {
 // Here, we instantiate the webpack.optimize.CommonsChunkPlugin constructor
 // After packaging, vendor.js file is generated
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Then, include the generated files into the html file

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

Introduction to DLLPlugin method

First, prepare two files

1. webpack.config.js
2. webpack.dll.config.js

webpack.dll.config.js file configuration is 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
 }),
 ],
}

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 reference method

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

That's all for this article. Hope it helps with your studies and that you will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)