前端小咸鱼一条 2021-07-25 09:13 采纳率: 61.5%
浏览 595
已结题

webpack5 使用 AddAssetHtmlWebpackPlugin在html中自动引入该资源,运行构建后的代码,script标签多了一个目录auto

img

img

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:8]' //打包的库里面向外面暴露出去的内容叫什么名字
    },
    plugins:[
        // 打包生成一个 manifest.json --> 提供和jquery映射
        new webpack.DllPlugin({
            name:'[name]_[hash:8]', //映射库的暴露的内容名称
            path:resolve(__dirname,'dll/manifest.json') //输出文件路径
        })
    ],
    mode:'production'
}
const { resolve } = require('path');
const HtmlWepbackPlugin = 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')
    },
    module:{
        rules:[
            {

            }
        ]
    },
    plugins:[
        new HtmlWepbackPlugin({
            // template:'./src/index.html'
        }),
        // 告诉webpack那些库不参与打包,同时使用时的名称也得变~
        new webpack.DllReferencePlugin({
            manifest:resolve(__dirname,'dll/manifest.json')
        }),
        // 将某个文件打包输出去,并在html中自动引入该资源
        new AddAssetHtmlWebpackPlugin({
            // filepath:resolve(__dirname,'dll/jquery.js'),
            filepath:require.resolve('./dll/jquery.js'),
            outputPath: 'dll',
            attributes: {
                nomodule: false,
            },
            
        })
    ],
    mode:'production'
}

img

img

  • 写回答

3条回答 默认 最新

  • 前端小咸鱼一条 2021-07-25 10:36
    关注

    这个 publickPath:'./ 就是自动插入到HTML标签src的路径,要和自己配置输出的路径一致

    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'
    }
    
    

    webpack.config.js

    
    
    const { resolve } = require('path');
    const HtmlWepbackPlugin = 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')
        },
        module:{    
            rules:[
                {
    
                }
            ]
        },
        plugins:[
            new HtmlWepbackPlugin({
                // template:'./src/index.html'
            }),
            // 告诉webpack那些库不参与打包,同时使用时的名称也得变~
            new webpack.DllReferencePlugin({
                manifest:resolve(__dirname,'dll/manifest.json')
            }),
            // 将某个文件打包输出去,并在html中自动引入该资源
            new AddAssetHtmlWebpackPlugin({
                filepath:resolve(__dirname,'dll/jquery.js'),
                publicPath: './',
            })
        ],
        mode:'production'
    }
    

    img
    img

    评论

报告相同问题?

问题事件

  • 系统已结题 8月2日
  • 创建了问题 7月25日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题