怎么理解webpack中的output.filename 和output.chunkFilename

#1

举个例子吧,官网的文档只理解了filename是主入口的文件名,chunkFilename是非主入口的文件名。

求大侠举个例子,谢过了,嘿嘿

1 Like
#2

filename应该比较好理解,就是对应于entry里面生成出来的文件名。比如:

{
    entry: {
        "index": "pages/index.jsx"
    },
    output: {
        filename: "[name].min.js",
        chunkFilename: "[name].min.js"
    }
}

生成出来的文件名为index.min.js

chunkname我的理解是未被列在entry中,却又需要被打包出来的文件命名配置。什么场景需要呢?我们项目就遇到过,在按需加载(异步)模块的时候,这样的文件是没有被列在entry中的,如使用CommonJS的方式异步加载模块:

require.ensure(["modules/tips.jsx"], function(require) {
    var a = require("modules/tips.jsx");
    // ...
}, 'tips');

异步加载的模块是要以文件形式加载哦,所以这时生成的文件名是以chunkname配置的,生成出的文件名就是tips.min.js

(require.ensure() API的第三个参数是给这个模块命名,否则 chunkFilename: "[name].min.js" 中的 [name] 是一个自动分配的、可读性很差的id,这是我在文档很不起眼的地方发现的。。。)

8 Likes
#3

大赞!

#4

大赞

#5

请问,为什么我使用require.ensure()加载的模块,最终会被打成一个js文件。我是希望它们各自成一个JS,如home.js,about.js,profile.js,
代码片段如下:

    childRoutes: [
          {
            path: 'home',
            getComponent(nextState, cb) {
              require.ensure([], (require) => {
                cb(null, require('components/Home'))
              },'home')
            }
          },
          {
            path: 'about',
            getComponent(nextState, cb) {
              require.ensure([], (require) => {
                cb(null, require('components/About'))
              },'about')
            }
          },
          {
            path: 'profile',
            getComponent(nextState, cb) {
              require.ensure([], (require) => {
                cb(null, require('components/Profile'))
              },'profile')
            }
          }
        ]
#6

刚还在困扰怎么给chunkFilename生出来的文件命名,看了文档,还真有方法:smile:

#7

我补充一下,跟require.ensure一样作用的 import(“modules/tips.jsx”) 也是会导致 1.hash.js 这种按需加载

1 Like
#8

是的是的,谢谢您

#9

[name]怎么可以不被[id]替换呢?