标签: html-webpack-plugin

我正在尝试配置webpack，以便它解析我的文件index.html（最好是使用HTMLWebpack插件），以便将所有包含的图像（例如<object data="images/test.svg">）移动到我的输出文件夹中，而文件夹路径保持不变。最终，运行webpack-dev-server应该呈现一个显示我的图像的页面。

这个问题有些相关，但与我自己的问题不太匹配。

我试图做的是：

从配置文件中可以看到，我尝试使用html-loader。没有exclude: /index\.html$/它会给我一个错误。我的猜测是HTMLWebpack插件和html-loader不相处。排除index.html不利于html-loader的目的。文件加载器无法识别并未包含的图像require(image)。

当前正在发生的事情：一切运行正常，但是没有images文件夹，也没有任何图像/dist/。

我目前的webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: './app/index.js',

  output: {
    path: __dirname + '/dist',
    publicPath: '/dist',
    filename: 'index_bundle.js'
  },

  module: {
    loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
    { test: /\.svg$/, loader: 'file-loader' },
    { test: /\.html$/, exclude: /index\.html$/, loader: 'html-loader'} …

当我改变我app.js和main.css同时webpack-dev-server运行时，包被更新。但是当我更改index.html内容时不会刷新；如果我向 HTML 添加一行，webpack-dev-server则不会刷新页面上的任何内容。这是我的webpack.config.js和package.json文件。我希望你能帮助我。

webpack.config.js :

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server'); 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 
var chalk = require('chalk');  
var env = process.env.WEBPACK_ENV;

var host = 'localhost';
var port = '8080';

var config = {
  devtool: 'source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://' + host + ':' + port +'/',
    './src/app.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module : {
    loaders: [ …

我正在使用Webpack捆绑资源.目前,它将CSS和JS文件捆绑到一个名为bundle.js的单独文件中.如何在JS文件中嵌入JS和CSS嵌入内联？

import HtmlWebpackPlugin from 'html-webpack-plugin';
import {HotModuleReplacementPlugin} from 'webpack';

export default {
  entry: {app: './test/dev'},
  module: {
    loaders: [
      {test: /\.js/, loader: 'babel-loader', exclude: /node_modules/},
      {test: /\.scss$/, loader: 'style!css!sass'}
    ]
  },
  plugins: [new HotModuleReplacementPlugin(), new HtmlWebpackPlugin()],
  devtool: 'eval-source-map'
};

我有一个使用Twig进行模板化的项目.其中的所有数据都是静态的,但为了清楚起见,我已将页面的其他部分分离出来(否则在一个文件中会有数百行标记).

我使用webpack作为构建工具,以及HTML Webpack插件.

例如,假设我有以下内容:

意见/ index.html的

<h1>This is my main index page</h1>    
{% includes './welcome/hello.html' %}

意见/首页/ hello.html的

<p>Hello from the templated page.</p>

现在我想做的是使用webpack捆绑任何js,css,并使用HTML Webpack Plugin创建HTML页面并将这些样式和脚本注入:

dist/index.html
dist/bundle.js
dist/styles.css

在我的dist/index.html中,我希望得到这样的内容,生成的html页面显示为HTML:

DIST/index.html的

<h1>This is my main index page</h1>
<p>Hello from the templated page.</p>

但是,我得到的是这样的东西,它仍然显示我的'包含'模板:

DIST/index.html的

<h1>This is my main index page</h1>
{% includes './welcome/hello.html' %}

如果无法编译模板,是否可以使用Html Webpack Plugin复制所有模板(所有模板文件的整个目录到/ dist以便它们保持路径)？

谢谢!

我使用Webpack和插件html-webpack-plugin.基于环境变量,我想<meta></meta>在最终index.html文件中注入一个标签.

我该怎么做呢？

我无法想出一个可行的解决方案。我想我应该以某种方式使用 html-webpack-inline-source-plugin 或多个入口点的组合，但这对我来说太多了，无法处理。

我想要的是：

• 我所有的 js 文件捆绑在一起并注入（不是内联）到 index.html [这当然有效！]
• 一个 js 文件（未包含在上述捆绑包中）内联到 index.html
• 内联的 js 文件必须经过 Webpack“转换管道”，因为该 js 文件取决于 Webpack 构建步骤

要内联的文件示例：

const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)

该文件应该首先经过 Webpack 转换，因为实际应该内联的内容如下：

<script>    
  var asset = "/static/json/blob.md5hashofblobjson.json";
  fetch(asset).then(.......)
</script>

因此基本上要内联的文件取决于Webpack 构建过程，不能仅使用 fs 模块读取并直接手动写入 index.html。

此外，内联 JavaScript 不应包含任何 WebpackJSONP 捆绑加载代码，而应包含纯 JS。在内联的 JS 下方应该是注入的（不是内联的）通常的捆绑脚本。

我应该如何配置我的构建过程？谢谢一百万！

我使用webpack 4并且我有两个入口点，用于在 html 中HtmlWebpackPlugin注入包文件<%=htmlWebpackPlugin.files.webpackManifest%>。

网络包配置：

const path = require('path')

// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
    console.log(err)
})

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/main.js',
        loginPage: './src/components/loginPage/loginPage.js',
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
        }),
        new extractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true,
        }),
        new HtmlWebpackPlugin({
            template: './src/index.ejs',
            hash: true,
            // inject: false,
            chunks: ['main'],
        }),
        // generate Login Page
        new …

我正在使用HtmlWebpackPlugin用javascript生成HTML文件。

现在，我想在<head>和<body>标签的不同部分添加自定义脚本

例：

我如何，

1. <script> alert('in head tag') </script>在<head>标签内添加第一个孩子
2. <script> alert('in body tag') </script>在<body>标签内添加第一个孩子

这是我的Webpack配置中的代码段

        new HtmlWebpackPlugin({
        hash: true,
        chunks: ["app"],
        filename: path.resolve(__dirname, "./public/pages/app.html"),
        title: "Title of webpage",
        template: path.resolve(__dirname, "./src/pages/app.page.html"),
        minify: {
            collapseWhitespace: true
        }
    })

我正在使用 Webpack 和打字稿开始一个项目。但是当我尝试运行开发服务器时，我在 html-webpack-plugin 上遇到了很多错误。这是我的输出：

> tecnilab-frontend@0.1.0 dev /home/alejo/tecnimaq/tecnilab/tecnilab-frontend
> cross-env NODE_ENV=development webpack-dev-server --mode=development --inline --hot
 
? ?wds?: Project is running at http://localhost:8080/
? ?wds?: webpack output is served from /
? ?wds?: Content not from webpack is served from ./public
? ?wds?: 404s will fallback to /index.html
? ?wdm?: wait until bundle finished: /
? ?wdm?: Hash: 9d40f5b1be348f5478dc
Version: webpack 4.43.0
Time: 10565ms
Built at: 21/07/2020 11:05:56 a. m.
     Asset       Size  Chunks             Chunk Names
 bundle.js   3.82 MiB    main  [emitted] …

假设我有 3 个由动态导入创建的异步块：

const Notes = lazy(() => import(/* webpackChunkName: "notes" */ 'pages/Notes'))
const Lists = lazy(() => import(/* webpackChunkName: "lists" */ 'pages/Lists'))
const Files = lazy(() => import(/* webpackChunkName: "files" */ 'pages/Files'))

将生成：

notes.g3g43g.js
lists.534535.js
files.234f8t.js

每个块都包含它自己的供应商依赖项。

所以在notes.g3g43g.js里面我们有react-big-calendar和lodash。

但是，当使用 SplitChunksPlugin 时，我们可以将chunks选项设置为all：

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: ({ context }) => (context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
      }
    }
  }
}

从这一点来看，react-big-calendar和lodash …