那些遇到过的问题

标签: html-webpack-plugin

如何在 jhipster 项目中使用chart.js

所以我想用以下项目尝试 Chat.js。

https://github.com/mraible/jhipster4-demo
Run Code Online (Sandbox Code Playgroud)

所以我研究并发现了以下内容 http://valor-software.com/ng2-charts/

所以我安装了 ng-2 图表。ng2-charts 需要chart.js，所以我也安装了chart.js，我可以在jhipster4-demo 项目的node_modules 下看到它。

ng2图表说 

Embedding Chart.js in application is mandatory!

<script src="node_modules/chart.js/src/chart.js"></script>
Run Code Online (Sandbox Code Playgroud)

如何在 jhipster4-demo 项目中执行上述强制性步骤？由于我不是 webpack 专家，因此不确定如何执行此操作。

jhipster webpack html-webpack-plugin webpack-2 angular

Sau*_*mar
2017 03-12
1
推荐指数
1
解决办法
1244
查看次数

WebPack 最终构建输出文件夹为空

无法解决如何强制 WebPack 3.6 构建最终dist。
只是输出文件夹是空的。使用给定的配置，应用程序在浏览器内存中构建并运行，但是dist文件夹是空的，现在有任何物理文件。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');

const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname);
const buildPath = path.join(__dirname, 'dist');

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: {
        /*base: path.resolve(staticSourcePath, 'src/sass/base.scss'),*/
        app: path.resolve(sourcePath, 'index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash].js', …
Run Code Online (Sandbox Code Playgroud)

webpack webpack-dev-server html-webpack-plugin

Kuz*_*zma
lucky-day
1
推荐指数
1
解决办法
2389
查看次数

Webpack HTML 为每个入口点生成一个 javascript

我正在为项目设置 Webpack，并使用 HTML webpack 插件生成 HTML 文件。

我的问题是生成的 HTML 包含所有捆绑包，而不是特定 HTML 文件的特定入口点。这是我的 ATM 代码

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

module.exports = {
  entry: {
    one: './js/one.js',
    two: './js/two.js',
    three: './js/three.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].js',
  },
  module: {
        loaders: [],
        rules:[
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          {
            test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
            use: ['url-loader?limit=100000&name=./img/[hash].[ext]'],
          }

        ]
  },
  plugins: [
  new HtmlWebpackPlugin({
    title: 'One',
    template: 'one.ejs', // Load a custom template (ejs by default …
Run Code Online (Sandbox Code Playgroud)

webpack html-webpack-plugin

Squ*_*gs.
lucky-day
1
推荐指数
1
解决办法
2112
查看次数

HtmlWebpackPlugin - 在 body 的特定位置注入 js

我正在使用 HtmlWebpackPlugin 将 javascript 注入到我的模板文件中：

<html>
    ...
    <body>
        ...
        <?php echo $this->inlineScript(); ?>
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

但是，我需要在 PHP 代码之前注入生成的包<?php echo $this->inlineScript(); ?>，以使内联脚本正常工作（它们需要 JQuery，它将在 vendor.js 中加载）。

结果应该是：

<html>
    ...
    <body>
        ...
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
        <?php echo $this->inlineScript(); ?>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

有没有办法实现这一目标？也许可以使用占位符之类的<%= htmlWebpackPlugin.options.??? %>或类似的东西？如果它不能与 HtmlWebpackPlugin 一起使用，我可以使用另一个 webpack 插件吗？

javascript asset-management webpack html-webpack-plugin webpack-4

kos*_*mak
2019 03-11
1
推荐指数
1
解决办法
7344
查看次数

使用 PHP 的 Webpack 配置 html-webpack-plugin

在我的 webpack 结构中，我使用 html-webpack-plugin 来生成我的 html 文件等，问题是我想在页面上制作一些东西，在这种情况下我想使用 PHP。我怎样才能让它正常工作？我在互联网上查找，但找不到任何东西。

这是我的 webpack.dev.js

const path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    MiniCssExtractPlugin = require('mini-css-extract-plugin');

const {
    distPath,
    srcPath
} = require('./webpack.config.paths');

const {
    selectedPreprocessor
} = require('./webpack.config.preprocessor');

module.exports = {
    entry: {
        main: './' + srcPath + '/js/index.js'
    },
    output: {
        path: path.resolve(__dirname, distPath),
        filename: '[name].[chunkhash].js'
    },
    devServer: {
        open: true,
    },
    module: {
        rules: [
            {
                test: selectedPreprocessor.fileRegexp,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: false,
                            sourceMap: true …
Run Code Online (Sandbox Code Playgroud)

php webpack html-webpack-plugin

作者
lucky-day
1
推荐指数
1
解决办法
5459
查看次数

Angular 8 webpack AOT 构建失败 - 无法读取未定义的属性“地图”

在此处输入图片说明

错误信息是 html-webpack-plugin 错误

仅在捆绑生产时才会出现此错误

当@ngtools/webpack 被 angular-router-loader、angular2-template-loader 和 awesome-typescript-loader 替换时，应用程序会正确捆绑

环境

Angular 8，webpack 4，html-webpack-plugin 3.2.0，打字稿：3.7.5

代码

const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const UglifyJSPlugin = require("uglifyjs-webpack-plugin")
const CompressionPlugin = require("compression-webpack-plugin")
const BrotliPlugin = require("brotli-webpack-plugin")
const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin") 

const isProd = process.env.NODE_ENV === "production"

module.exports = {
    entry: {
        polyfills: './src/polyfills',
        vendor: './src/vendor',
        main: ["./src/main.prod"]
    },
    resolve: {
        extensions: [".js", …
Run Code Online (Sandbox Code Playgroud)

aot webpack html-webpack-plugin angular

use*_*109
2020 06-20
1
推荐指数
1
解决办法
883
查看次数

webpack HtmlWebpackPlugin 不是构造函数吗？

包.json

   {
      "name": "test2",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "html-webpack-plugin": "^4.5.0",
        "webpack": "^5.1.3",
        "webpack-cli": "^4.1.0"
      }
    }
Run Code Online (Sandbox Code Playgroud)

webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
 
    plugins: [
        new HtmlWebpackPlugin({template: './src/webpack.html'})
    ],
    mode: 'development'
};
Run Code Online (Sandbox Code Playgroud)

我的错误：

[webpack-cli] TypeError: HtmlWebpackPlugin is not a constructor
    at Object.<anonymous> (D:\webpack …
Run Code Online (Sandbox Code Playgroud)

webpack html-webpack-plugin

Tok*_* Mr
lucky-day
1
推荐指数
1
解决办法
2178
查看次数

为什么我在 Webpack 5.11.0: 1 ERROR in child compilers 中得到这个错误？

所以我在尝试编译时在我的 webpack 代码中收到此错误，当我以生产模式启动时会发生这种情况，当我删除 html-loader 时，错误消失了，我还包括要使用的 HtmlWebpackPlugin 和 file-loader ：

webpack.prod.js：

const path = require("path");
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
  mode: "production",
  output: {
    publicPath: '',
    filename: "js/[name].[contenthash].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
});
Run Code Online (Sandbox Code Playgroud)

webpack.common.js：

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

module.exports = {
  entry: {
    main: "./src/index.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/html/index.html'
    })
  ],
  module: {
    rules: …
Run Code Online (Sandbox Code Playgroud)

webpack webpack-html-loader html-webpack-plugin webpack-file-loader

Joe*_*ndo
2020 12-23
1
推荐指数
1
解决办法
1364
查看次数

HtmlWebpackPlugin擦除模板div

我按照这个例子(http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760301)启动一个reactj应用程序,所以这是我的webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  tempalte : __dirname + '/app/index.html',
  filename : 'index.html',
  inject : 'body'
})
module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path : __dirname + '/dist',
    filename : "index_bundle.js"
  },
  module : {
    loaders :[
      {test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
    ]
  },
  plugins : [HtmlWebpackPluginConfig]
}
Run Code Online (Sandbox Code Playgroud)

这是我的index.html模板:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> teste</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

这是我的web.html生成的index.html

<!DOCTYPE html> …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack html-webpack-plugin

Fab*_*ner
lucky-day
0
推荐指数
1
解决办法
1378
查看次数

Express.static()不起作用

我有以下服务器代码:

var express = require('express');
var webpack = require('webpack');
var app = express();

//app.use(express.static(path.join(__dirname, "public")));
app.use("/", express.static(__dirname + "/public"));
//both not working. I have tried multiple ways....

app.get("/",function (req, res){
res.sendFile(__dirname + "/public/index/index.html")
});


app.listen(3000);
Run Code Online (Sandbox Code Playgroud)

Webpack配置

module.exports = {
entry: './app/index/index.js',
output: {
    path: path.resolve(__dirname, 'public/index'),
    publicPath: '/public/index',
    filename: 'index_bundle.js'
},
module: {
    rules: [
        { test: /\.(js)$/, use: 'babel-loader' },
        { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        template: 'app/index/index.html'
    })
]};
Run Code Online (Sandbox Code Playgroud)

以下目录结构: …

node.js express webpack html-webpack-plugin webpack-2

dfi*_*dfi
2018 05-06
0
推荐指数
1
解决办法
6104
查看次数

具有多个Angular路径的循环依赖

我正在使用Webpack 4.15.1开发Angular 6.0.7应用程序.使用webpack-dev-server时应用程序运行良好,但是一旦我尝试使用生产模式构建它,它就会在HtmlWebpackPlugin发射阶段失败.

它必须与HtmlWebpackPlugin有关,因为如果我删除插件,那么javascript文件生成没有问题.它可能与生成的块数有关.

直到我向我的应用程序添加了两个新路由才发生这种情况.一旦我删除任何两个路由,应用程序编译正常.这是错误:

> webpack --config webpack/webpack.production.config.js --progress

clean-webpack-plugin: C:\example\WiFi-Setup\bin has been removed.
 95% emitting HtmlWebpackPluginUnhandled rejection Error: Cyclic dependency
    at visit (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:35:13)
    at visit (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:53:9)
    at visit (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:53:9)
    at Function.toposort [as array] (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:22:22)
    at Object.module.exports.dependency (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\lib\chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\index.js:364:35)
    at C:\example\WiFi-Setup\node_modules\html-webpack-plugin\index.js:113:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\example\WiFi-Setup\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\example\WiFi-Setup\node_modules\tapable\lib\Hook.js:35:21)
    at Compiler.emitAssets (C:\example\WiFi-Setup\node_modules\webpack\lib\Compiler.js:364:19)
    at onCompiled (C:\example\WiFi-Setup\node_modules\webpack\lib\Compiler.js:231:9)
    at hooks.afterCompile.callAsync.err (C:\example\WiFi-Setup\node_modules\webpack\lib\Compiler.js:553:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\example\WiFi-Setup\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook …
Run Code Online (Sandbox Code Playgroud)

webpack html-webpack-plugin angular

Mit*_*dge
2018 07-07
0
推荐指数
1
解决办法
1015
查看次数

标签 统计

html-webpack-plugin ×11

webpack ×11

angular ×3

javascript ×2

webpack-2 ×2

aot ×1

asset-management ×1

express ×1

jhipster ×1

node.js ×1

php ×1

reactjs ×1

webpack-4 ×1

webpack-dev-server ×1

webpack-file-loader ×1

webpack-html-loader ×1