Question

这是我需要的文件夹结构，因为此repo将用于netlify上托管的网站的源代码。要使netlify站点正常工作，index.html必须位于repo的根文件夹中。我在配置webpack时遇到问题。我已经让这些图像按原样运行了。哈巴狗和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进行此操作。

webpack项目的文件夹结构

1 个答案: