dll · 前端 · 看云

webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'build') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), // 告訴webpack哪些庫不參與打包，同時使用時的名稱也得變~ new webpack.DllReferencePlugin({ manifest: resolve(__dirname, 'dll/manifest.json') }), // 將某個文件打包輸出去，并在html中自動引入該資源 new AddAssetHtmlWebpackPlugin({ filepath: resolve(__dirname, 'dll/jquery.js') }) ], mode: 'production' }; ``` webpack.dll.js ``` /* 使用dll技術，對某些庫（第三方庫：jquery、react、vue...）進行單獨打包當你運行 webpack 時，默認查找 webpack.config.js 配置文件需求：需要運行 webpack.dll.js 文件 --> webpack --config webpack.dll.js */ const { resolve } = require('path'); const webpack = require('webpack'); module.exports = { entry: { // 最終打包生成的[name] --> jquery // ['jquery'] --> 要打包的庫是jquery jquery: ['jquery'], }, output: { filename: '[name].js', path: resolve(__dirname, 'dll'), library: '[name]_[hash]' // 打包的庫里面向外暴露出去的內容叫什么名字 }, plugins: [ // 打包生成一個 manifest.json --> 提供和jquery映射 new webpack.DllPlugin({ name: '[name]_[hash]', // 映射庫的暴露的內容名稱 path: resolve(__dirname, 'dll/manifest.json') // 輸出文件路徑 }) ], mode: 'production' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1 id="title">hello html</h1> </body> </html> ``` src/index.js ``` import $ from 'jquery'; console.log($); ```