webpack dll优化记录

最新推荐文章于 2024-04-28 10:00:00 发布

力博荣三维可视化

最新推荐文章于 2024-04-28 10:00:00 发布

阅读量199

点赞数

分类专栏：前端基础文章标签： webpack dll 优化记录

本文链接：https://blog.csdn.net/qq_21476953/article/details/94753644

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

webpack dll优化记录

1、编写dll打包配置

// webpack.dll.js
const path = require('path');
const webpack = require('webpack');

console.log('webpack dll start...')
const dllPath = path.join(__dirname, 'dll');
module.exports = {
    mode: 'development',
    entry: {
        dll: ['jquery']
    },
    output: {
        path: dllPath,
        filename: '[name].js',
        library: '[name]',
        libraryTarget: "global"
    },
    plugins: [
        new webpack.DllPlugin({
            name: "[name]",
            path: path.join(dllPath, '[name]-manifest.json'),
          }),
    ]
};

2、编写生产打包配置

// webpack.prod.js
const path = require('path');
const webpack = require('webpack');
console.log('webpack prod start...')
module.exports = {
    mode: 'development',
    entry: './test.ts',
    output: {
        filename: 'test.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'test',
        libraryTarget: "window"
    },

    module: {
        rules: [{
            test: /\.ts$/,
            use: "ts-loader"
        }]
    },
    resolve: {
        extensions: [
            '.ts','js'
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            name:'dll',
            context: __dirname,
            manifest: require('./dll/dll-manifest.json')
        })
    ]
};

3、分别运行脚本

"build:dll": "webpack --config ./webpack.dll.js -p",
"build": "webpack --config ./webpack.prod.js",

4、使用打包后的文件

dll/dll.js
dist/test.js

<body>
    123
    <script src="../dll/dll.js"> </script>
    <script src="../dist/test.js"> </script>
</body>

<全文结束>

力博荣三维可视化

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack dll优化记录

webpack dll优化记录1、编写dll打包配置// webpack.dll.jsconst path = require('path');const webpack = require('webpack');console.log('webpack dll start...')const dllPath = path.join(__dirname, 'dll');module...
复制链接

扫一扫