webpack 项目的文件夹结构

Question

这是我需要的文件夹结构，因为这个 repo 将用于 netlify 上托管的网站的源代码。为了使 netlify 站点正常工作，index.html 必须位于 repo 的根文件夹中。我在配置 webpack 时遇到问题。我已经让图像按应有的方式工作。 pug 和 scss 以及可能的 js 文件需要如下所示的文件夹结构。我已阅读 pug-html-loader 的文档，但与此无关。

Project-name
|--dist
|  |--Images
|  |  |--Img.png
|  |--Pages
|  |  |--Buttons.html
|  |  |--Cards.html
|  |--Styles
|  |  |--main.css
|  |--Js
|  |  |--main.js
|--src
|  |--Images
|  |  |--Img.png
|  |--Pages
|  |  |--Buttons.pug
|  |  |--Cards.pug
|  |--Styles
|  |  |--buttons.scss
|  |  |--cards.scss
|  |  |--main.scss   
|  |--Js
|  |  |--main.js           
|--index.pug
|--index.html
|--index.scss
|--index.css
|--index.js
|--index.bundle.js
|--webpack.config.js

这是我目前的 Webpack 配置 -

const HtmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path'),
ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
entry: './index.js',
output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
},
module: {
    rules: [
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback:'style-loader',
                use: ['css-loader','sass-loader'],
                publicPath:'/dist',
            })
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath:'./images/'
                }  
            }]
        },
        {
            test:/\.pug$/,
            use:['html-loader','pug-html-loader']
        }
    ]
},
devServer: {
    contentBase:path.join(__dirname,'dist'),
    compress:true,
    port:3000,
    stats:'errors-only',
    open:true,
},
plugins: [
    new HtmlWebpackPlugin({
        title: 'website',
        minify: {
            collapseWhitespace: true
        },
        template:'./index.pug',
    }),
    new ExtractTextPlugin('index.css')
]
}

Answer 1

您可以使用plugin filemanger 执行此操作。