时间戳

首页 > 解决方案 > Asset Module Webpack 创建一个额外的文件夹

javascript - Asset Module Webpack 创建一个额外的文件夹

问题描述

我正在使用新的资产模块而不是加载程序文件，但我遇到了问题，因为它创建了两个文件夹。这似乎是一件容易的事情，但我花了很多时间搜索，但我找不到任何解决方案。这是我的 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports={
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname ,'build'),
        filename: 'javascript/[name].js',
        assetModuleFilename: '../images/[name][ext]'
    },
    module:{
        rules:[
  
            {
                test: /\.scss$/,
                use:[
                    // Creates `style` nodes from JS strings
                    {loader : MiniCssExtractPlugin.loader },
                    // Translates CSS into CommonJS
                     {loader:"css-loader"},
                     // Compiles Sass to CSS
                    {loader:"sass-loader"}    
                ]
            },          {
                test: /\.(png|jpg|gif)/,
                type: 'asset/resource'
              }

        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template: './src/index.html'
    }), new MiniCssExtractPlugin({
        filename: 'style/style.css'
    })]
}

我的文件结构是：

-src
  -images
   *logoface.png
  -scss
   *style.scss
*package.json
*webpack.config.js
*package-lock.json

结果结构为：

-build
 -images
  *logoface.png
 -javascript
  *main.js
 -style
  *style.css
*index.html
-images
 *logoface.png

在这里我的 package.json，你可以看到我删除额外文件夹的构建测试。我想要正确的解决方案。非常感谢你的帮助，我还在学习。

{
  "name": "testingNodeJs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --watch",
    "build-test": "webpack --mode development && rm -fr images",
    "build-dev": "webpack --mode development --watch && rm -fr images"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.1.0",
    "html-webpack-plugin": "^5.2.0",
    "mini-css-extract-plugin": "^1.3.9",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0"
  }
}

标签： javascriptwebpackwebpack.config.js

解决方案

我解决了它，我将assetModuleFilename：更改'../images/[name][ext]'为assetModuleFilename: 'images/[name][ext]'，然后将MiniCssExtractPlugin的配置更改为：

module: {
        rules:[
            {
                test: /\.(scss)$/i,
                use:[
                    {
                        loader : MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        }
                    
                    },
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)/,
                type: 'asset/resource'
              },
            ]
         },

公共路径在哪里

publicPath: '../'

我希望它可以帮助其他人。

推荐阅读