如何解决Webpack + 包含多个文件的多个文件夹
我有如下结构的文件夹和文件。只是我想根据文件夹结构生成文件..
Folder-A
css
a.css
b.css
c.css
templates
index.html
js
1.js
2.js
3.js
Folder-B
css
a.css
b.css
c.css
templates
index.html
js
1.js
2.js
3.js
问题是
- 未基于文件夹生成的 css 文件。
- index.html 中包含的所有 css 文件。它不包括基于文件夹结构
预期输出:
- Css,html,images,fonts 文件应分别生成 dist/{folder} 文件夹
- 生成的 HTML 文件仅包含相应文件夹中的 CSS。
[![样本格式][1]][1]
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
test1: [
'./folder-a/js/index.js','./folder-a/templates/index.html'
],test2: [
'./folder-b/js/index.js','./folder-b/templates/index.html'
]
},output: {
path: path.resolve(__dirname,'dist'),filename: '[name].js',publicPath: "/dist/"
},module: {
rules: [
{
test: /\.css$/i,use: [
{
loader: MiniCssExtractPlugin.loader,},{
loader: 'css-loader',options: {
url: false
}
}
]
},{
test: /\.pug$/,use: ['pug-loader'],{
test: /\.js$/,exclude: /(node_modules)/,use: {
loader: 'babel-loader?presets[]=es2015',options: {
presets: ['@babel/preset-env'],],plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',chunkFilename: "[name].css"
}),new HtmlWebpackPlugin({
filename: 'folder-a/index.html',template: './folder-a/index.html',}),new HtmlWebpackPlugin({
filename: './folder-b/index.html',template: './folder-b/index.html',new CopyPlugin({
patterns: [
{ from: './folder-a/images',to: './folder-a/images' },{ from: './folder-b/images',to: './folder-b/images' }
],]
};
只是 [1]:https://i.stack.imgur.com/h4OL3.png
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。