主页 / 问题 / 940135
Accepted
Air
Asked:2020-02-03 17:58:27 +0000 UTC2020-02-03 17:58:27 +0000 UTC

webpack4 不会编译所有 HTML 文件

  • 772

我最初误解了问题的本质，我更正了问题以便更准确地表述问题......

有这个构建webpack：

'use strict';
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


const minimizerBlock = {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false,
        parse: {},
        compress: {},
        mangle: true,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
      },
    }),
    new OptimizeCSSAssetsPlugin({})
  ]
}

const config = {
  entry: {
    main: './frontend/src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'main.js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 8888,
    overlay: true,
    proxy: {
      '/api': 'http://localhost:8889'
    }
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /\.sass$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      //{ test: /\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif|webp)$/, loader: 'url-loader', },
      {
        test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/image/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'image/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/fonts/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(mp3)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/audio/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'audio/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(html)$/,
        include: [
          path.resolve(__dirname, './frontend/pages/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          }
        }]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './index.css',
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'frontend/src/', 'template.html'),
      filename: 'index.html',
      favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png',

    }),

  ]
};
module.exports = (env, options) => {
  let production = options.mode == 'production';
  config.devtool = production ? false : 'inline-cheap-module-source-map';
  config.optimization = production ? minimizerBlock : {};
  return config;
}

在此处输入图像描述

有папке src - файле template.html，其中有这样一个部分的布局

 <div id="root">
   <img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt="" />
</div>

编译后 webpack

转世index.html в папке public我得到这个结果

<div id="root">
  <img src="images/iconfinder_tech_0001_4023871.png" alt="" />
</div>

一切正常。

同时src，有一个文件夹pages具有不同的页面，它们具有相同的布局。

<header>
   <img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/>
</header>

启动后webpack，将创建一个包含这些文件的文件夹，结果如下

在此处输入图像描述

然后in不起作用require的问题imgheader

我得到一个错误。 在此处输入图像描述

告诉我我的有什么问题webpack？？？？

StackOverflow上的类似问题

javascript

2 个回答

  1. Best Answer

    答案比我想象的要容易...

    我不能写更多，因为我还没有真正弄清楚......

    可以在接受的答案中找到详细信息，一切正常......

           {
        test: /\.(html)$/,
        include: [
            path.resolve(__dirname, './frontend/pages/')
        ],
        use: [
            {
                loader: 'file-loader'
            },
            {
                loader: 'extract-loader'
            },
            {
                loader: 'html-loader',
                options: {
                    interpolate: true,
                }
            }
        ],
        exclude: [
            path.resolve(__dirname, 'frontend/src/', 'template.html')
        ]
    }
    • 1

  2. 可以html-webpack-plugin生成多个 HTML 页面：

    plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({ // Also generate a test.html
        filename: 'test.html',
        template: 'src/assets/test.html'
    })
]

    您可以尝试以这种方式为每个页面创建自己的插件实例，但在这种情况下，您必须将页面存储在同一目录中，因为。我认为手动整理它们不是一种选择，但不幸的是我不会告诉你如何克服嵌套（

    const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');

    function generateHtmlPlugins(templateDir) {
        const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
        return templateFiles.map(item => {
            const parts = item.split('.');
            const name = parts[0];
            const extension = parts[1];
            return new HtmlWebpackPlugin({
                filename: `${name}.html`,
                template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`)
            })
        })
    }

    const htmlPlugins = generateHtmlPlugins('./frontend/pages');

    module: {
        rules: [
            ...
        ]
        plugins: [
            new MiniCssExtractPlugin({
                filename: './index.css',
            }),
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'frontend/src/', 'template.html'),
                filename: 'index.html',
                favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png',
            }),
        ].concat(htmlPlugins)
};

    显然这无助于解决问题，因为。文件分散在不同的文件夹中，我没有立即注意到这一点，但它可能有助于接近解决方案）

    • 0

相关问题