标签: html-webpack-plugin

我正在使用 webpack 对遗留的多页 ASP.NET Web 表单应用程序进行现代化改造。在我尝试使用SplitChunksPlugin使用其选项对我的包进行重复数据删除之前，我已经取得了相当大的成功chunks: 'all'。不幸的是，这会产生一些额外的 JS 包，所有这些都需要script与原始条目包一起包含在标签中。毫不奇怪，上面的链接文档说明了这一点：

默认情况下，[插件]仅影响按需块，因为更改初始块会影响 HTML 文件应包含以运行项目的脚本标记。

但我非常希望将这些初始条目块分开，因此我试图找到一种方法将所有这些额外的块包含在脚本标记中。这里的标准建议似乎是使用HtmlWebpackPlugin生成包含所有脚本标记的 HTML 页面，但这对我不起作用（至少在其默认配置中），至少有两个原因：

1. 这是一个 Web 表单项目。人们不会简单地篡改 aspx 文件。
2. 即使我确实找到了一种在每次运行 webpack 时生成一些有效的 aspx 文件的方法（我认为这是可行的，但这是主要的困难）；看来 HtmlWebpackPlugin 只为所有块或手动选择的子集（使用选项chunks: []）生成脚本标签。

为了详细说明第二点，并回答我的问题——我可以对分割块进行一些手动分析以构建依赖关系图，并手动将每个块包含在 aspx 中，但这显然不是一种可维护的方法。我希望 HtmlWebpackPlugin 可以提供某种方式，至少表明该块最终由该条目使用，或者该条目使用这些块等，但我没有在其输出中发现任何此类关系。

有没有什么方法可以在不通过 h​​ack-hoops 的情况下自动确定哪些分割块是给定条目块的依赖项？

我使用具有多个入口点和块的 Webpack/HtmlWebpackPlugin 来编译 AngularJS 应用程序。我需要将 JS 注入到 HTML 模板中间的某个位置，所以我使用

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>

如此处所述： https: //github.com/jaketrent/html-webpack-template/blob/master/index.ejs。模板已编译，但没有为我的块插入脚本标签。怎么了？

我的相关Webpack配置[webpack.prod.config.js]：

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const common = require('./webpack.base.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  output: {
    filename: '[name].bundle.min.js',
    path: path.resolve(__dirname, 'dist.prod')
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src-ts-store/landingpage_store.liquid.ejs',
        filename: 'landingpage_store.liquid',
        base: {href: '/apps/sgp'},
        inject: false,/* instead using this:  https://github.com/jantimon/html-webpack-plugin/issues/386 …

使用 copy-webpack-plugin 创建哈希图像（在 dist 文件夹的 html 页面中）后，如何引用它？\n我尝试以这种方式解决此问题。

我的 index.ejs 文件（您可以将其视为 .html 文件）中有一个经典标签<img>，我正在使用 copy-webpack-plugin 将其复制到 dist 文件夹中

我的问题是，在“生产”模式下，我向图像添加哈希值，而不是在 index.ejs 文件中，<img>静止图像的属性 src 将指向没有哈希值的图像。因此，我的 dist 文件夹中的 index.html 不显示图像。

为了解决这个问题，我曾经WebpackManifestPlugin生成一个manifest.json映射我的图像和相应的 webpack 输出图像（带有哈希值）的对象，如下所示：

{\n  "assets/img/natura.jpg": "./assets/img/natura.e1b203dd72abf2858773.jpg",\n  "assets/img/natale.jpg": "./assets/img/natale.5955e3731fd0538bb5ec.jpg",\n  "assets/img/logo-angular.svg": "./assets/img/logo-angular.e7d82ae6d37ff090ba95.svg",\n  "assets/img/manifest.json": "./assets/img/manifest.1473edc04cb44efe5ce6.json"\n}\n

后来我生成了manifest.json我可以读取这个文件：

productsJSON = require(\'./assets/img/manifest.json\');\n

最后我可以通过这种方式将 productsJson 传递到我的 index.ejs ：

new HtmlWebpackPlugin({\n        \n         inject: false,\n         template: "./index.ejs", //Puoi mettere anche un file html\n         templateParameters: {\n            \'myJSON\': …

由于小提示我不能得到像这样的路线

<Route path="/events/:id" component={EventDetailRoute} />

工作,因为我读过似乎是index.html中的bundle必须是绝对的,但是我使用的是HtmlWebpackPlugin,所以bundle被注入一个相对路径.

我试图为webpack设置输出配置如下:

output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
},

但这也不起作用.

如果我尝试这条路线:http:// localhost:8080/events/7,我在尝试查找http:// localhost:8080/events/index_bundle.js时收到404错误

这是我的webpack.config:

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

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: './src/index.js',
    output: {
        path: "/" + path.resolve('dist', 'build'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        publicPath: '/'
    },
    module: { …

我正在尝试将.Google API密钥从.env文件加载到我的主索引中.我知道process.env.GOOGLE_PLACES_API_KEY正确加载,因为我可以控制日志并且它会吐出我的密钥.但它不会将变量渲染到DOM中.

我几乎从不使用EJS,而Webpack一直是我推动这个项目向前发展的最大绊脚石.似乎有千种不同的选择来做一些应该非常简单和直接的事情.我只需要将一个JS变量插入到我输出的HTML中.

这是我的webpack配置:

// webpack.dev.config.js
const webpack = require('webpack');
const path = require('path');
const SplitByPathPlugin = require('webpack-split-by-path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    path.join(__dirname, 'client', 'src', 'main.js'),
    'webpack-hot-middleware/client',
    'webpack/hot/dev-server',
  ],
  devtool: 'source-map',
  target: 'web',
  output: {
    path: '/',
    publicPath: 'http://localhost:3000/',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: path.join(__dirname, 'client', 'src'),
        loaders: [
          'react-hot-loader',
          'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy,cacheDirectory=babel_cache',
        ],
        exclude: /node_modules/,
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
    ],
  },
  resolve: { …

我们想要来自 Webpack 的两个输出——我们的整个应用程序及其所有依赖项，以及一个只有一个依赖项（主应用程序不共享）的不同页面。

这样做的方法似乎是利用entryWebpack 配置的属性。然而，这还不够，因为我们还使用HtmlWebpackPlugin输出我们的 HTML 文件，并build.js添加了动态编译的Webpack（以及编译的 LESS 等）。根据 HtmlWebpackPlugin 文档：

如果您有多个 Webpack 入口点，它们都将包含在生成的 HTML 中的脚本标签中。

这对我们不起作用，所以我需要利用他们的filterChunks选择。这个GitHub 问题响应最简洁地说明了这一点：

module.exports = {
  entry: {
    'page1': './apps/page1/scripts/main.js',
    'page2': './apps/page2/src/main.js'
  },
  output: {
    path: __dirname,
    filename: "apps/[name]/build/bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page1'],
      filename: 'apps/page1/build/index.html'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page2'],
      filename: 'apps/page2/build/index.html'
    })
  ]
};

（在 HtmlWebpackPlugin 文档中，这是在“过滤块”部分下）

所以，我像这样修改了我们的代码：

module.exports = {
    entry: {
        app: './public/js/ide.js',
        resetPassword: './public/js/reset_password.js' …

我正在使用带有 HTMLWebPackPlugin 的 Webpack 4。我目前正在处理接近 30 个不同的页面，而且还有更多的内容。这是我在代码中的示例...

        new HTMLWebpackPlugin({
            template: './src/game11/index.html',
            mViewPort: 'width=device-width, initial-scale=1.0',
            favicon: './src/game11/media/favicon-16x16.png',
            title: 'Game 11 Training',
            filename: 'game11.htm',
            chunks: ['game11']
        }),
        new HTMLWebpackPlugin({
            template: './src/game12/index.html',
            mViewPort: 'width=device-width, initial-scale=1.0',
            favicon: './src/game12/media/favicon-16x16.png',
            title: 'Game 12 Training',
            filename: 'game12.htm',
            chunks: ['game12']
        }),

到目前为止，我的 webpack.config.js 文件中有 30 个。但我更愿意做这样的事情而不是......

 ['game11','game12','something-else','etc'].forEach((event) => {
       new HtmlWebpackPlugin({
           template: './src/${event}/index.html',
           mViewPort: 'width=device-width, initial-scale=1.0',
           favicon: './src/${event}/media/favicon-16x16.png',
           title: '${event} Training',
           filename: '${event}.htm',
           chunks: ['${event}']
       }),
   }),

上面的代码不起作用，它只是一个草图。但是今天是否有可能在不添加额外插件或修改我的输出的情况下做这样的事情？我只是想添加数组值，这将在其本身创建一个新实例。

非常感谢！

我正在尝试使用 HtmlWebpackPlugin 生成 .HTML 文件

当使用 webpack 运行构建时，我遇到以下问题：HTML 文件中脚本标记的 src 与脚本文件名不同

这是我的 webpack 配置：

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

module.exports = {
  entry: { index: path.resolve(__dirname, '../src/index.js') },
  output: {
    filename: 'bundle.[fullhash].js',
    path: path.resolve(__dirname, '../dist/'),
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.html'),
      minify: true,
    }),
  ],
  module: {
    rules: [
      // HTML
      {
        test: /\.(html)$/,
        use: ['html-loader'],
      },

      // JS
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },

      // CSS
      {
        test: /\.css$/,
        use: …

所以我使用webpack dev中间件如下:

const compiledWebpack = webpack(config),
          app             = express(),
          devMiddleware   = webpackDevMiddleware(compiledWebpack, {
            historyApiFallback: true,
            publicPath: config.output.publicPath,
            overlay: {
              warnings: true,
              errors: true
            },
            compress: true,
            stats: { colors: true }
          })


    app.use(devMiddleware)




    app.get('*', (req, res) => {
      // Here is it! Get the index.html from the fileSystem
      const htmlBuffer = devMiddleware.fileSystem.readFileSync(`${config.output.path}/index.html`)

      res.send(htmlBuffer.toString())
    })

    app.listen(PORT, function () {})

    console.log('Running on port ' + PORT)

但是,出于某种原因,我没有得到实时重装.我也没有获得叠加功能.我正在使用此设置,因为我使用的是webpackhtmlplugin.

我觉得我在这里错过了一个简单的概念:(任何想法？

是否可以通过html-webpack-plugin加载.json文件并将其传递给我的车把文件？

我目前的设定

const path = require('path');
const fs = require('fs');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

const extractCss = new ExtractTextPlugin({
  filename: './css/app.css'
});

const pages =  fs
    .readdirSync(path.resolve(__dirname, 'src/hbs/pages'))
    .filter(fileName => fileName.endsWith('.hbs'));

module.exports  = {
        context: path.resolve(__dirname, "src"),
        entry: './js/main.js',
        output: {
            path: path.resolve(__dirname, './build'),
            filename: 'js/app.js',
        },
        ...
        ...
        plugins: [
            new CleanWebpackPlugin(['build']),
            extractCss,
            ...pages.map(page => new HtmlWebpackPlugin({
                 template: 'hbs/pages/'+page,
                 filename: page
            }))
        ],

        module: {
            rules: [ …