0

这是我第一次使用 Webpack，我遇到了问题。

我收到错误消息 ERROR in Error: Child compiler failed: Module parse failed: Unexpected character '�' (1:0)

当我以这种方式放置图像标签 src 时。我在第一个“/”之前添加了一个句点，因为我在我的根文件夹中，并且想将一个文件夹添加到资产中。所以，我希望它看起来像这样： img src="./assets/images/mockup.png" alt=" 但这无法构建到生产和开发模式

如果我不添加这样的句点，它可以在开发模式下工作。img src="/assets/images/mockup.png" alt=""，但这不是我想要的最终构建。它使最终构建失败，因为如果我不将句点放在首位，它就找不到我的资产。

这是我的文件树：

文件树

这是我的 webpack 配置。

webpack.config.js

const currentTask = process.env.npm_lifecycle_event
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const fse = require('fs-extra')

const postCSSPlugins = [require('postcss-import'), require('postcss-mixins'), require('postcss-simple-vars'), require('postcss-nested'), require('postcss-hexrgba'), require('postcss-color-function'), require('autoprefixer')]

class RundAfterCompile {
    apply(compliler) {
        compliler.hooks.done.tap('Copy Images', function () {
            fse.copySync('./app/assets/images', './dist/assets/images')
        })
    }
}

// htmls
let pages = fse
    .readdirSync('./app')
    .filter(function (file) {
        return file.endsWith('.html')
    })
    .map(function (page) {
        return new HtmlWebpackPlugin({
            filename: page,
            template: `./app/${page}`,
        })
    })

// CSS
let cssConfig = {
    test: /\.css$/i,
    use: ['css-loader?url=false', { loader: 'postcss-loader', options: { plugins: postCSSPlugins } }],
}

// Common rules
let config = {
    entry: './app/assets/scripts/App.js',
    plugins: pages,
    module: {
        rules: [
            cssConfig,
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        interpolate: true,
                    },
                },
            },
        ],
    },
}

// Developement stage
if (currentTask == 'dev') {
    cssConfig.use.unshift('style-loader')
    config.output = {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'app'),
    }
    config.devServer = {
        before: function (app, server) {
            server._watch('./app/**/*.html')
        },
        contentBase: path.resolve(__dirname, 'app'),
        hot: true,
        port: 3000,
        host: '0.0.0.0',
    }
    config.mode = 'development'
}

我在我的 webpack 配置文件中犯了错误吗？为什么我会收到错误：'错误中的错误：子编译失败：模块解析失败：意外字符'�'（1：0）'

如果我添加“./”，则处于开发模式和生产模式。有任何想法吗？没有“。” 它在我的文件树中找不到文件吗？

4

0 回答 0