问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

webpack 内联静态资源 [object Module]

头像
阿超
    1001934

    webpack.config.js

    const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        "index": "./src/js/index.ts",
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "./js/[name].js"
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/[name].css',
        }),
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/index.html",
            chunks: ["index"]
        }),
    ],
    module: {
        rules: [
            ... 这里有配置scss img 等等
            //   {
            //     test: /\.(html)$/,
            //     use: 'raw-loader'
            // }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    mode: "production",
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
};

    index.html

    <body>
    <%= require('raw-loader!./base/header.html')%>
    <%= require('html-loader!./base/header.html')%>
</body>

    直接输出
    [object Module] [object Module]

    不知道 require 在引入这个base/header.html 发生了什么，为什么会输出[object Module],不管我有没有配置.html 使用 raw-loader 它都是同样的错误。请大神指点下，我是哪里配置错了，或者理解错了！！！谢谢！

    webpack前端javascript
    阅读 1.7k
    1 个回答
    得票最新
    头像
    阿超
      1001934
      ✓ 已被采纳

      package.json

      {
    "name": "test",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "dependencies": {
        "compass-mixins": "^0.12.11",
        "css-loader": "^6.7.1",
        "file-loader": "^6.2.0",
        "html-loader": "^3.1.0",
        "html-webpack-plugin": "^5.5.0",
        "mini-css-extract-plugin": "^2.6.0",
        "postcss-loader": "^6.2.1",
        "sass": "^1.49.9",
        "sass-loader": "^12.6.0",
        "ts-loader": "^9.2.8",
        "typescript": "^4.6.3",
        "url-loader": "^4.1.1",
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2",
        "raw-loader": "^4.0.2",
        "webpack-dev-server": "^4.8.1"
    },
    "scripts": {
        "start": "webpack-dev-server"
    },
    "devDependencies": {
       
    }
}

      webpack.config.js

      const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        "index": "./src/js/index.ts",
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "./js/[name].js"
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/[name].css',
        }),
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/index.html",
            chunks: ["index"]
        }),
    ],
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: '../',
                }
            },
            {
                loader: 'css-loader',

            },
                'sass-loader',
            ],
        },
        {
            test: /\.(png|svg|jpg|gif|webp)$/,
            use: [{
                loader: 'url-loader', //是指定使用的loader和loader的配置参数
                options: {
                    limit: 500, //是把小于500B的文件打成Base64的格式，写入JS
                    name: './imgs/[name].[ext]',
                }
            }]
        },
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    mode: "production",
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
};

      html

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="代码侠">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>博客</title>
</head>

<body>
    <%= require('raw-loader!./base/header.html').default%>
</body>

</html>

      非常感谢_usw 的回答 弄出来了就ok!!!

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题