Coder Social home page Coder Social logo

Comments (9)

geeyan avatar geeyan commented on August 18, 2024 1

我的配置是有前置脚本的=。=

// 所有js, css 加 hash
fis.match('*.{js,css,less}', {
    useHash: true
});

// 所有图片加 hash
fis.match('image', {
    useHash: true
});

类似生成以下css:
pack/aio-e2bd84f-ff2f203.css

from fis3-postpackager-loader.

geeyan avatar geeyan commented on August 18, 2024

这里后来查了一下,观察生成的aio-xxx.{css,js}以及__RESOURCE_MAP__发现,是各有一个文件没有被加入到map.json里的:
image

理论上,上图两个框里依次是:
"template:page/investor/profile/mobile/edit/edit.js"
"template:page/investor/profile/mobile/edit/edit.less"

再往上找,这两个文件是会匹配到打包aio-xxx.{css,js}的:
image

from fis3-postpackager-loader.

geeyan avatar geeyan commented on August 18, 2024

这里延伸出一个问题:
fis3-postpackager-loader只会解析一个页面,而不是所有页面的依赖来生成不同的aio-xxx.{js/css}?
我这边是有一个view.php和一个edit.php文件的,view.php页面打包没问题,访问edit.php有上述问题。

from fis3-postpackager-loader.

geeyan avatar geeyan commented on August 18, 2024

大概找出原因了,是因为在pack时设置了以下配置:

allInOne: {
    css: 'pack/aio.css',
    js: 'pack/aio.js',
},

这里pack.js就取了这个参数,没有区分不同的php文件,默认pkg/${filepath}_aio.{js,css}有点粗暴

from fis3-postpackager-loader.

geeyan avatar geeyan commented on August 18, 2024

附上稍微优雅一点点的配置方法:

allInOne: {
    css: 'pack/aio-${hash}.css',
    js: 'pack/aio-${hash}.js',
},

看了源代码才知道可以这样玩。
@2betop 可以加到README.md里面,方便后面人参考。

from fis3-postpackager-loader.

wyntau avatar wyntau commented on August 18, 2024

@geeyan 我使用${hash}之后, 生成的js 和 css文件的hash值是一样的. 而且我修改css文件后,重新生成的hash值并没有改变, 不知道为什么

edit

看了源码, 生成的hash是根据html文件计算的, 而不是根据pack的所有文件计算的. 有没有什么办法能够根据合并的文件来生成一个hash呢

from fis3-postpackager-loader.

2betop avatar 2betop commented on August 18, 2024

你给 js 和 css 加上 useHash 属性,应该就能在加一段 hash 值

from fis3-postpackager-loader.

wyntau avatar wyntau commented on August 18, 2024

感谢 @geeyan @2betop 已经设置成功

from fis3-postpackager-loader.

xqkeep avatar xqkeep commented on August 18, 2024

@treri 我加上${hash},也有部分资源404的情况,你是怎么解决?

from fis3-postpackager-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.