不同文件夹里的html和CSS怎么链接,【Web前端问题】关于webpack打包问题,怎么打包成多个文件夹,每个文件夹下有相应的html,js和css?...

本文讨论了如何使用Vue CLI的Webpack配置打包出多文件夹结构,每个文件夹包含对应的HTML、JS和CSS文件。作者遇到的问题是虽然HTML已经按预期被打包到各自文件夹,但JS和CSS仍然在同一目录。解决方案涉及到修改entry和output的配置,以及可能需要自定义Webpack插件来处理资源路径。博客中提到了其他开发者也面临相同问题,并分享了他们的解决思路。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用vue-cli创建的工程,默认webpack配置是打包成单文件,现在有个需求是打包出很多文件夹,其相对应的html,js和css在不同文件夹下,自己修改了一些配置,改为多chunk形式,html被单独打到文件夹下了,但js和css还在同一个文件夹,想问一下该怎么配置?

entry: {

app: './src/main.js',

one: './src/main.1.js'

},

// Template for index.html

index: path.resolve(__dirname, '../dist/app/index.html'),

one: path.resolve(__dirname, '../dist/one/index.html'),

new HtmlWebpackPlugin({

filename: config.build.index,

template: 'index.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

// more options:

// https://github.com/kangax/html-minifier#options-quick-reference

},

// necessary to consistently work with multiple chunks via CommonsChunkPlugin

chunksSortMode: 'dependency'

}),

new HtmlWebpackPlugin({

filename: config.build.one,

template: 'index.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

// more options:

// https://github.com/kangax/html-minifier#options-quick-reference

},

// necessary to consistently work with multiple chunks via CommonsChunkPlugin

chunksSortMode: 'dependency'

}),

以上是我添加的配置

下面是打包出来的文件夹结构

e5762f70f1dfd81866872fb006015528.png

d267bbb13b899af2055652cfa50ecd08.png][3]

css和js都在static里,想分别把他们放到app和one文件夹里面,该怎么配置?

回答:

可以直接将entry的name作为入口:

filename: '[name]/assets/js/[name].[chunkhash:4].js'

chunkFilename : `[name]/assets/js/[name].[id].[chunkhash:4].js`

回答:

这个问题您解决了么 我也遇到了同样的问题 请指教

回答:

写个webpack插件自己处理

回答:

请问用webpack4怎么打包成多个文件夹的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值