Question

当我通过webpack开发服务器运行项目时，看不到带有图像的文件夹。但是，当我使用默认的webpack启动项目时，会创建此文件夹。

我的webpack配置

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

const PATHS = {
    src: path.resolve(__dirname, 'src'),
    dist: path.resolve(__dirname, 'dist'),
    assets: 'assets/'
}

module.exports = {
    entry: `${PATHS.src}/index.ts`,

    output: {
        filename: `${PATHS.assets}js/[name].js`,
        path: PATHS.dist,
        publicPath: '/',
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: [/node_modules/, /static/]
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
                exclude: [/node_modules/],
            },
            {
                // images / icons
                test: /\.(png|jpg|gif|svg)$/,
                loader: "file-loader",
                options: {
                  name: '[name].[ext]'
                }
              },
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            alwaysWriteToDisk: true,
        }),
        new MiniCssExtractPlugin({
            filename: `${PATHS.assets}css/[name].css`
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: `${PATHS.src}/img`, to: `${PATHS.assets}img` },
            ]
        })
    ],

    devServer: {
        port: 4200,
        overlay: true,
        contentBase: PATHS.dist,
    }, 

    resolve: {
        extensions: ['.js', '.ts']
    }
}

包装

{
  "name": "meditation_app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BeerBaron322/Meditation_App.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/BeerBaron322/Meditation_App/issues"
  },
  "homepage": "https://github.com/BeerBaron322/Meditation_App#readme",
  "dependencies": {},
  "devDependencies": {
    "@types/html-webpack-plugin": "^3.2.2",
    "copy-webpack-plugin": "^6.0.2",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "svg-inline-loader": "^0.8.2",
    "ts-loader": "^7.0.4",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meditation</title>
</head>
<body>
    <!-- <video src="https://www.youtube.com/watch?v=uG-51tPRqCU"></video> -->
    <div class="container">
        <div class="timer">
            <img src="/accets/img/123.jpg" alt="">
            <img src="/accets/img/play.svg" alt="">
            <svg class="svg-container">
                <circle class="circle" r="140">
            </svg>
            <div class="timer-button">
                <button class="button-play">Play</button>
                <button class="button-stop">Stop</button>
            </div>
            <div class="time"></div>
        </div>
    </div>
</body>
</html>

项目树 enter image description here

在这里我看不到img文件夹 enter image description here

还可以看到错误 enter image description here

对不起，我的英语

Webpack开发服务器看不到文件夹

0 个答案: