webpack externals技术 + dll技术

最新推荐文章于 2024-07-05 17:12:56 发布

铁树哥写Java

最新推荐文章于 2024-07-05 17:12:56 发布

阅读量568

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/mhbsoft/article/details/107177942

版权

webpack 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

externals：使用cdn引入不需要打包。
dll ：只打包一次。以后不再打包。

externals
webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
    ],
    // 模式 development 开发， production 生产
    mode: 'production',
    // 拒绝打包
    externals: {
        // 拒绝 jQuery 被打包进来
        jquery: 'jQuery'
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello html</h1>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

dll
webpack.dll.js

/**
 * 使用dll技术，对某些库进行单独打包
 *  当你运行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: {
        // [name] --> entry.jquery
        filename: '[name].js',
        path: resolve(__dirname, 'dll'),
        library: '[name]_[hash]',  // 打包的库里面向外暴露出去的内容叫什么名字。hash值可以保证每次打包都不一样
    },
    // 插件
    plugins: [
        // new HtmlWebpackPlugin({
        //     template: "./src/index.html"
        // }),
        // 打包生成一个 manifest.json --> 提供和 jquery 映射
        new webpack.DllPlugin({
            name: '[name]_[hash]',  // 映射库的暴露的内容名称
            path: resolve(__dirname, 'dll/manifest.json'), // 输出文件路径
        })
    ],
    // 模式 development 开发， production 生产
    mode: 'production',
}

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/js/index.js',
    output: {
        filename: 'js/build.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')
        })
    ],
    // 模式 development 开发， production 生产
    mode: 'production',
}

命令：
先执行：

webpack --config webpack.dll.js

再执行：

webpack

铁树哥写Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack externals技术 + dll技术

externals：使用cdn引入不需要打包。dll ：只打包一次。以后不再打包。externalswebpack.config.jsconst {resolve} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { filename: 'js/bu
复制链接

扫一扫

专栏目录