const webpack = require('webpack'); module.exports = { // ...其他配置 plugins: [ new webpack.DllReferencePlugin({ manifest: require('./dist/vendor-manifest.json') }) ] }; index.html 代码语言:txt 复制 在使用 DLLPlugin 时,你需要先运行webpack.dll.config.js来生成 DLL 文件和 manifest...
5 在主 webpack.config.js 中使用 DllReferencePlugin 引入打包好的 DLL 文件: constpath=require('path');constwebpack=require('webpack');module.exports={mode:'production',entry:'./src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'dist'),},plugins:[newwebpack.DllRefer...
这一步我们只需要改写 vue-cli 为我们生成好的build/webpack.base.conf.js即可: 该文件主要是添加了 plugins 配置: plugins: [ new webpack.DllReferencePlugin({ context: __dirname, // 与 Dllplugin 里的 context 所指向的上下文保持一致,这里都是指向了当前文件的 build 目录 manifest: require('../vendo...
其中entry指定需要打包的代码入口文件,output指定打包后的文件输出路径,plugins指定使用的插件及其配置。 在命令行中执行webpack命令,根据配置文件进行打包。执行完毕后,会生成一个包含共享库的文件。 在项目的webpack配置文件中,使用DllReferencePlugin插件引用生成的共享库文件。配置项包括context、manifest等参数。其中...
[name]_library',// 动态链接库输出的文件名},plugins:[// dll输出文件*.manifest.json *.jsnewwebpack.DllPlugin({name:'[name]_[hash]',// 动态链接库的全局变量名称,需要和 output.library 中保持一致path:path.join(__dirname,'dll','[name].manifest.json'),// 描述动态链接库文件的 manifest....
plugins: [newwebpack.DllReferencePlugin({manifest:require('./dist/vendor-manifest.json') }) ] 再在入口html文件中引入 vendor.dll.js 然后在package.json文件中添加快捷命令(build:dll) "scripts":{"dev":"cross-env NODE_ENV=development webpack-dev-server ...
plugins: [ // 接入 DllPlugin new webpack.DllPlugin({ // 动态链接库的全局变量名称,需要和 output.library 中保持一致 // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值 name: '[name]_dll_[hash]', // 描述动态链接库的 manifest.json 文件输出时的文件名称 ...
plugins: [ ... // 核心是引用manifest.json new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./vendor-manifest.json') }) ] ... } ... 不出意外,DllReferencePlugin在构建主流程中只是引用了一下manifest.json文件。 此时先构建webpack.dll.conf.js,执行完毕产出vendor.dll....
plugins: [//使用插件 DllPluginnewDllPlugin({/*该插件的name属性值需要和 output.library保存一致,该字段值,也就是输出的 manifest.json文件中name字段的值。 比如在jquery.manifest文件中有 name: '_dll_jquery'*/name:'_dll_[name]',/*生成manifest文件输出的位置和文件名称*/path: path.join(__dirname,...
rules ... plugins: [ // 划重点 new webpack.DllReferencePlugin({ context: path.resolve(__dirname, '..'), manifest: require('../dist/vendor-manifest.json') }), ... htmlwebpacks ... // 在htmlwebpack后插入一个AddAssetHtmlPlugin插件,用于将vendor插入打包后的页面 new AddAssetHtmlPlugin...