Как настроить изображения и правильные ссылки на контентный хеш с помощью webpack4 в приложении node.js? - PullRequest
Новая
       19

Как настроить изображения и правильные ссылки на контентный хеш с помощью webpack4 в приложении node.js?

0 голосов
/ 02 апреля 2019

Всего новичков как в Node.js, так и в Webpack! Сейчас я нахожусь на последней стадии перед развертыванием моего небольшого проекта node.js, и у меня есть проблемы с изображениями и ссылками на хеш-контент.

Таким образом, в этом проекте 4 страницы, 2 - статические html (с ними не связаны функциональные js, но я создал две только для импорта файла css!), 2 - файлы ejs, отрисованные с сервера с использованием файлов json, и они также имеют свои собственные соответствующие функциональные файлы JS. Все 4 разделяют 1 styles.css.

Моя цель - использовать webpack для минимизации html, css, использовать babel для перевода всех js в более старую версию, а затем минимизировать его. После настройки я понял две проблемы:
1. Изображения не все включены в папку public / imgs, в которую я планирую поместить их. Зачем?
Ответ: после некоторых исследований я думаю, что причина в том, что мне нужно импортировать все imgs в мой файл js. Один img используется в качестве фона в url () в моем css, и я импортировал 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'
                }
            }]
        }  
    ]
    }
}
...