webpack4不能编译所有html文件吗？

时间：2019-02-04 02:38:32

标签： html webpack

  

起初我没有正确理解问题的实质，我更正了问题，以便更准确地表述问题...

有这样的程序集 # Step 3. Train model model.fit(X_Training, Y_Training, batch_size=512, epochs=27, validation_split=0.05) # save and load model model.save('my_model.h5') # creates a HDF5 file 'my_model.h5' del model # deletes the existing model # returns a compiled model # identical to the previous one model = load_model('my_model.h5') # save as JSON json_string = model.to_json() # model reconstruction from JSON: from keras.models import model_from_json model = model_from_json(json_string) predicted_output = model.predict(newdata, batch_size=512) print(predicted_output) ：

webpack

有一个src文件夹-template.html文件，其中包含布局的一部分

'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;
}

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

在webpack文件夹中转生，我得到了这个结果

index.html in the 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

然后 <header> <img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/> </header> 中require的问题img不起作用

遇到错误。

告诉我我的Webpack有什么问题吗？

Link to the project

6 个答案:

答案 0 :(得分：2)

您应在启用html-loader标志的情况下使用interpolate：

       {
            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')
            ]
        }

我已创建pr以解决您的问题：https://github.com/sarnor/club/pull/1。

还请注意，当您只能像<img src="../../image/icons/iconfinder_tech_0001_4023871.png"这样写图像源时，插值很丑。

还要注意您的相对URL指向错误的目录，所以您的URL中缺少../。

答案 1 :(得分：0)

您在HTML文件上使用file-loader，我不认为该文件会尝试解析文件中的任何内容，而只是将其复制到输出文件夹中。

我建议尝试改用html-loader，看看是否能解决问题。

尤其是，您需要更改此部分：

{
  test: /\.(html)$/,
  include: [
    path.resolve(__dirname, './frontend/pages/')
  ],
  use: [{
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
    }
  }]
}

看起来像这样：

{
  test: /\.(html)$/,
  include: [
    path.resolve(__dirname, './frontend/pages/')
  ],
  use: [{
    loader: 'html-loader',
    options: {
      name: '[path][name].[ext]',
    }
  }]
}

并可能使用以下命令安装html-loader：

npm i -D html-loader

答案 2 :(得分：0)

如果您想知道何时读哪个加载器：

https://webpack.js.org/loaders/  和

(Webpack) Using the url-loader or file-loader, do I really have to include a require() in my .js for every static image I want to include?

对于图像，我认为url-loader很好，因为它还可以将base-64编码的图像链接呈现为图像。

尝试：

            {
                test: /\.(jpg|png|gif|eot|woff2|woff|ttf|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: ["url-loader?limit=100&name=static/[name]_[hash].[ext]"]
            }

它将做什么？这将采用jpg|png|gif|eot|woff2|woff|ttf|ico|svg类型的任何文件并将其发射到文件夹static（可以是任何名称，也可以是可选的）并在名称中添加哈希。它不仅会发出图像和字体，而且还会将任何文件的大小限制为100 kb，并且每次都为静态资源名称添加唯一的哈希值，以确保对具有相同名称的图像进行任何更改也会刷新缓存。

答案 3 :(得分：0)

您可以从配置中删除以下行并检查

favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png'

答案 4 :(得分：0)

您没有加载程序的问题，但是您使用template literals的方式。反引号需要包装${} 

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

类似地，您将拥有

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

答案 5 :(得分：0)

要在HTML文件模板中使用require。使用html-loader时，您需要为.html files包括file-loader。可能已经做到了。

因此，webpack的配置应类似于：

{
  test: /\.(html)$/,
  include: [
    path.resolve(__dirname, './frontend/pages/')
  ],
  use: [{
    loader: 'html-loader',
    options: {
      name: '[path][name].[ext]',
      attrs: [':data-src']
    }
  }]
}


{
  test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
  include: [
    path.resolve(__dirname, './frontend/binary/image/')
  ],
  use: [{
    loader: 'file-loader',
    options: {
      name: 'image/[name].[ext]',
    }
  }]
}

，然后使用 require in img tag，如下所示：     

有关此here

的更多信息
相关问题
最新问题