Question

Node.js和Webpack的新手总数！现在，我正处在部署小型node.js项目的最后阶段，并且图像和contenthash链接存在问题。

因此，此项目有4页，其中2个是静态html（没有链接的功能性js，但我创建了两个只是导入css文件！），2个是使用json文件从服务器呈现的ejs文件，它们也有自己的功能性js文件。所有4个共享1个styles.css。

我的目标是使用webpack最小化html，css，使用babel将所有js转换为旧版本，然后也将其最小化。设置完成后，我意识到了两个问题：
1.这些图像并没有全部包含在我计划放入的public / imgs文件夹中。为什么？
答：经过研究，我认为原因是我必须将所有img导入到我的js文件中。在我的CSS的url（）中，将一张img用作背景，然后将css导入了js文件，此图像已正确复制到public / imgs，并且还向其中添加了哈希。如果我错了请纠正我！
2.即使它们都移到了那里，json文件中的链接也无效。因此，在这种情况下，我该如何处理所有图像，以便它们在静态文件和我的ejs文件中都能完美呈现（图像将来自json文件）？当然，由于这是一个小项目，因此我可以在此处复制整个原始图像文件夹，但是我只是想知道在这种情况下人们在大型项目中会做什么？
3.听说我们应该使用[contenthash]生成新的内置文件，但是在这种情况下，我的ejs文件再次无法识别新链接（css和js）。那么我应该如何处理我的ejs文件才能嵌入动态文件？

这是我的webpack.prod.js

const path = require("path")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")

module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js',
    about: './src/about.js',
    store: './src/store.js',
    fans: './src/fans.js'
  },

  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "public")
  },

  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        },
        inject: true,
        chunks: ['index'],
        filename: 'index.html'
      }),
      new HtmlWebpackPlugin({
        template: "./src/about.html",
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        },
        inject: true,
        chunks: ['about'],
        filename: 'about.html'
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ 
        filename: "styles.[contenthash].css", 
        chunkFilename: "[id].css"}),
    new CleanWebpackPlugin(), 
  ],
  module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        },
        {
            test: /\.css$/,
            use: [
            MiniCssExtractPlugin.loader, 
            "css-loader"
            ]
        },
        {
            test: /\.(svg|png|jpg|gif)$/,
            use: {
                loader: "file-loader",
                options: {
                name: "[name].[hash].[ext]",
                outputPath: "imgs"}
                }
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts'
                }
            }]
        }  
    ]
    }
}

如何在node.js应用程序中使用webpack4设置图像和正确的contenthash链接？

0 个答案: