Question

我正在使用一个静态网站，使用webpack作为我的构建工具。

该网站由一个HTML文件组成，包含许多资产，它也使用Bootstrap和jQuery。

我可以将我的webpack版本配置为使用缩小和散列来捆绑所有内容，但是，我的图像未被包含且webpack不更新我的html文件，除了在页眉和页脚中包含css和js包。 / p>

如何让webpack获取我的html文件，更新图像引用并将其复制到我的dist文件夹？

我的Webpack看起来像这样......

webpack.prod.js

   const commonPaths = require('./common-paths');
    const webpack = require('webpack');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const config = {
      mode: 'production',
      output: {
        filename: 'assets/[name].[hash].min.js',
      },
      devtool: false,
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: [
                {
                  loader: 'css-loader',
                  options: { modules: false, importLoaders: 1, camelCase: false, sourceMap: false },
                },
                {
                  loader: 'postcss-loader',
                  options: { config: { ctx: { autoprefixer: { browsers: 'last 2 versions' } } } },
                },
              ],
            }),
          },
        ],
      },
      plugins: [
        new ExtractTextPlugin({
          filename: 'assets/[name].[hash].min.css',
          allChunks: true,
        }),
      ],
    };
    module.exports = config;

webpack.common.js

const commonPaths = require('./common-paths');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

const config = {
  entry: {
    app: [`${commonPaths.appEntry}/assets/index.js`],
    vendor: ['uglify-loader!bootstrap', 'uglify-loader!jquery'],
  },
  output: {
    path: commonPaths.outputPath,
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.(js?)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]',
      },
      {
        test: /modernizr/,
        loader: 'imports-loader?this=>window!exports-loader?window.Modernizr',
      },
      { test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery' },
    ],
  },
  optimization: {
    splitChunks: { cacheGroups: { vendor: { chunks: 'initial', test: 'vendor', name: 'vendor', enforce: true } } },
  },
  plugins: [
    new ModernizrWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'JS Webpack Starter',
      template: 'src/index.html',
      favicon: 'src/favicon.ico',
      chunksSortMode: 'dependency',
      hash: true,
      inject: 'body',
    }),
  ],
};
module.exports = config;

Answer 1

事实证明https://github.com/webpack-contrib/html-loader就是答案。

Webpack静态站点不更新HTML

1 个答案: