webpack中多文件打包配置的詳細流程

更新時間：2023年11月20日 09:57:51 作者：周星星日記

這篇文章主要介紹了webpack中多文件打包配置的詳細流程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1.module,chunk,bundle的區(qū)別

moudle - 各個源碼文件，webpack中一切皆是模塊
chunk - 多模塊合并成的，如entry, import(), splitChunk
bundle - 最終的輸出文件

2.多文件打包配置

2.1 webpack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')
module.exports = {
    entry: {
        index: path.join(srcPath, 'index.js'),
        other: path.join(srcPath, 'other.js')
    },
    module: {
        rules: [
          // ----- 同上文 ----
        ]
    },
    plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示該頁面要引用哪些 chunk （即上面的 index 和 other），默認全部引用
            // chunks: ['index']  // 只引用 index.js
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            // chunks: ['other']  // 只引用 other.js
        })
    ]
}

上面的chunks配置，如果不配置chunks，那么打包出來的結(jié)果是默認引入全部js

<body>
    <p>webpack demo</p>
    <input type="text"/>
	<script type="text/javascript" src="index.js"></script>
	<script type="text/javascript" src="other.js"></script>
</body>

如果配置了chunks，那么就只引入對應(yīng)的結(jié)果

<body>
    <p>webpack demo</p>
    <input type="text"/>
     <script type="text/javascript" src="index.js"></script>
</body>

2.2 webpack.prod.js

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')
module.exports = smart(webpackCommonConf, {
    mode: 'production',
    output: {
        // filename: 'bundle.[contentHash:8].js',  // 打包代碼時，加上 hash 戳
        filename: '[name].[contentHash:8].js', // name 即多入口時 entry 的 key
        path: distPath,
        // publicPath: 'http://cdn.abc.com'  // 修改所有靜態(tài)文件 url 的前綴（如 cdn 域名），這里暫時用不到
    },
    module: {
        rules: [
            //代碼重復(fù)
        ]
    },
    plugins: [
        new CleanWebpackPlugin(), // 會默認清空 output.path 文件夾
        new webpack.DefinePlugin({
            // window.ENV = 'production'
            ENV: JSON.stringify('production')
        })
    ]
})

多入口時，output出口的【name】變量會對應(yīng)到入口的變量名

到此這篇關(guān)于webpack中多文件打包的文章就介紹到這了,更多相關(guān)webpack多文件打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: