Home  >  Article  >  Web Front-end  >  How to extract third-party libraries using webpack

How to extract third-party libraries using webpack

亚连
亚连Original
2018-06-19 09:30:161438browse

This article mainly introduces the correct posture of webpack to extract third-party libraries. There are two commonly used methods to extract third-party libraries. This article introduces these two methods in detail. Those who are interested can learn more

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

The difference : The first method requires the third-party library to be run and packaged once every time it is packaged. The second method only packages the project files each time. We only need to quote the third-party compressed file that was 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')
 }
}

Then package the generated file and introduce 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(&#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
 }),
 ],
}

Then the webpack.config.js file is configured 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;)
 })
 ]
}

Then run

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

htmlQuotation method

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JavaScript module optimization

How to use webpack express to achieve multi-page site development

Webpack framework (mastering core technology)

How to control multiple scroll bars to scroll synchronously using JS

Use vue-cli How webpack builds vue

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

Statement:
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