问题描述
我有如下结构的文件夹和文件。只是我想根据文件夹结构生成文件..
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 (将#修改为@)