Home > Web Front-end > JS Tutorial > body text

Correctly parse webpack to extract third-party libraries

小云云
Release: 2017-12-23 14:57:41
Original
1714 people have browsed it

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. This article mainly introduces the correct posture of extracting third-party libraries with webpack. There are two commonly used methods to extract third-party libraries. This article introduces these two methods in detail. For those who are interested You can learn about it, I hope it can help everyone.

  1. CommonsChunkPlugin

  2. DLLPlugin

Difference: The first type must be packaged every time The third-party library also runs packaging once. The second method only packages the project file each time. We only need to quote the third-party compressed file packaged for the first time.

CommonsChunkPlugin method introduction

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')
 }
}
Copy after login

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


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

Introduction to DLLPlugin method

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(&#39;webpack&#39;)
const library = &#39;[name]_lib&#39;
const path = require(&#39;path&#39;)

module.exports = {
 entry: {
 vendors: [&#39;vue&#39;, &#39;vuex&#39;]
 },

 output: {
 filename: &#39;[name].dll.js&#39;,
 path: &#39;dist/&#39;,
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, &#39;dist/[name]-manifest.json&#39;),
  // This must match the output.library option above
  name: library
 }),
 ],
}
Copy after login

Then webpack.config The .js file configuration is as follows


const webpack = require(&#39;webpack&#39;)

module.exports = {
 entry: {
 app: &#39;./src/index&#39;
 },
 output: {
 filename: &#39;app.bundle.js&#39;,
 path: &#39;dist/&#39;,
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(&#39;./dist/vendors-manifest.json&#39;)
 })
 ]
}
Copy after login

Then run


$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js
Copy after login

html reference method


<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>
Copy after login
Related recommendations:


Detailed explanation of the difference between webpack require.ensure and require AMD_javascript skills

Detailed explanation of vue Load components on demand webpack require.ensure

Webpack learning tutorial front-end performance optimization summary

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template