如何使用 Webpack 拆分应用程序和供应商代码

Posted 2023-03-08

【中文标题】如何使用 Webpack 拆分应用程序和供应商代码

【英文标题】：How to split app and vendor code with Webpack

【发布时间】：2018-04-28 20:38:12

【问题描述】：

我正在使用 react 开始一个新项目 所以我有这个 webpack.config.js 文件应该处理 2 个块，一个用于应用程序代码，一个用于基于 webpack documentation 示例的供应商

webpack.config.js

const webpack = require('webpack');
module.exports = 
    entry: 
        app: './src/App.jsx',
        vendor: ['react', 'react-dom', 'whatwg-fetch']
    ,
    output: 
        path: __dirname + './static/',
        filename: 'app.bundle.js'
    ,
    plugins: [
        new webpack.optimize.CommonsChunkPlugin(
            name: 'vendor',
            filename: 'vendor.bundle.js'
        )
    ],
    module: 
        loaders: [
            test: /.jsx$/,
            loader: 'babel-loader',
            query: 
                presets: ['react', 'es2015']
            
        , ]
    
;

当我运行webpack -p 时，我可以看到应该生成我的两个资产，但输出目录中没有任何内容。

Webpack 输出

           Asset    Size  Chunks             Chunk Names
   app.bundle.js    6 kB       0  [emitted]  app
vendor.bundle.js  108 kB       1  [emitted]  vendor
   [6] ./src/App.jsx 3.37 kB 0 [built]
   [7] ./src/IssueAdd.jsx 3.57 kB 0 [built]
   [9] ./src/IssueList.jsx 5.46 kB 0 [built]
  [10] ./src/IssueFilter.jsx 2.52 kB 0 [built]
  [20] multi react react-dom whatwg-fetch 52 bytes 1 [built]
    + 16 hidden modules

Webpack 版本是 3.8.1，带有 windows 7 开发环境。 我在这里遗漏了什么吗？

【问题讨论】：

你使用的是哪个版本的 webpack？

webpack -v 给出 3.8.1

你是什么操作系统？输出路径可能是错误的。尝试使用来自 Node 的 path 模块和 resolve。

【参考方案1】：

如果您希望在输出文件夹中发出两个单独的文件首先您必须确保每次更新文件时这些文件都有新名称，其中一种方法是使用缓存 [chunkhash]，如 webpack 中所建议的那样3.8.1Documentation

在文件顶部包含路径，所以你的输出应该是这样的（你可以相应地改变它）：

 var path = require('path');

 output: 
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  ,

在你的插件里面你可以给名字

plugins: [
    new webpack.optimize.CommonsChunkPlugin(
      name: 'vendor'
    ) 
]

你可以阅读更多关于 Webpack 的内容3.8.1 output-filename

【讨论】：

谢谢解决..还有一个问题，为什么我应该在文件名中使用哈希？

哪个哈希？你在说 [chunkhash] 吗？

是的 .. 没关系，我已经阅读了 chunkhash 的文档，它很清楚 .. 再次感谢 :)

很高兴为您提供帮助:)