标签: html-webpack-plugin

我正在尝试利用SplitChunksPlugin为MPA中的每个页面/模板生成单独的包.当我使用HtmlWebpackPlugin时,我会为每个页面获取一个html文件,其中脚本标记指向正确的包.那样太好了!但是,我遇到的问题是我的供应商文件.我希望单独的html文件只指向他们需要的供应商包.当SplitChunksPlugin创建多个供应商捆绑包时,我无法将每个单独的html文件指向正确的供应商捆绑包.制作的包包括:

home.bundle.js
product.bundle.js
cart.bundle.js
vendors~cart~home~product.bundle.js
vendors~cart~product.bundle.js

所以基本上主页模板应该引用home.bundle.js,vendor~cart~home~product.bundle.js,而不是第二个供应商包.只有购物车和产品模板才能引用两个供应商包.我正在利用HtmlWebpackPlugin的chunks选项,但无法获取它来提取正确的供应商包,除非我明确引用它的名称,如下所示:

chunks: ['vendors~cart~home~product.bundle','home']

但是这有点挫败了动态呈现脚本标签的目的.我已经尝试创建供应商入口点,但这会将我的所有供应商整合在一起.有一些我缺少的简单配置吗？

我的webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        home: './src/js/page-types/home.js',
        product: './src/js/page-types/product.js',
        cart: './src/js/page-types/cart.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/js')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new Visualizer(),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            chunks: ['vendors','home']
        }),
        new HtmlWebpackPlugin({
            filename: 'product.html', …

我正在使用HTMLWebpackPlugin,在我的模板中我有一个img标签:

<img src="./images/logo/png">

如果你注意到,这里我使用的是一个相对路径,认为webpack将触发在我的webpack.config.js文件中配置的文件加载器,但是在编译之后我在html中得到了完全相同的src属性:

<img src="./images/logo/png">

我怎样才能触发webpack动态替换这些相对路径,以及我在webpack配置中配置的内容？

我正在使用Webpack 4而我正在创建配置文件,当试图HtmlWebpackPlugin在控制台上使用它时:Entrypoint undefined = index.html它打开浏览器并且HTML确实出现但是我在控制台上收到这个奇怪的消息,如何解决这个问题？

这就是我的配置文件的样子:

'use strict'

const webpack = require('webpack')
const { join, resolve } = require('path')

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

module.exports = {
  mode: 'development', // dev
  devtool: 'cheap-module-eval-source-map', // dev
  entry: join(__dirname, 'src', 'index.js'),
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    contentBase: resolve(__dirname, 'build')
  },
  plugins: [
    new …

我正在使用webpack html插件从graphiql.ejs生成html页面,但是当我运行时它没有生成html页面 npm start

webpack.config.js

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: "public/graphql/index.html", // Write the file to <public-path>/graphql/index.html
      inject: false, // Do not inject any of your project assets into the template
      GRAPHQL_VERSION: packageJSON.dependencies.graphql.replace(/[^0-9.]/g, ""), // Get the graphql version from my package.json
      template: "graphiql.ejs" // path to template
    })
  ]
};

我想在/ public/graphql目录中生成index.html.有谁知道我做错了什么？有没有其他命令来运行webpack？

我有一个非常具体的要求,我需要将JS脚本标记拆分为一个文件,将CSS链接标记拆分为另一个文件HtmlWebpackPlugin.

目前,这两个脚本和链接标签进入这两个文件.有没有办法单独进行？

这是我当前的Webpack文件:

import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import autoprefixer from 'autoprefixer'

const extractCSS = new ExtractTextPlugin({
  filename: 'css/app.bundle.css',
  allChunks: true
})

const createCSSfile = new HtmlWebpackPlugin({
  chunks: ['app'],
  minify: {
    collapseWhitespace: true
  },
  hash: true,
  template: 'src/ejs/css.ejs',
  filename: 'templates/css.php'
})

const createJSfile = new HtmlWebpackPlugin({
  chunks: ['app'],
  minify: {
    collapseWhitespace: true
  },
  hash: true,
  template: 'src/ejs/js.ejs',
  filename: 'templates/js.php'
})

const config = …

我使用Webpack + html-webpack-plugin来构建我的所有静态文件.问题是,当我使用谷歌地图API时,它不起作用.

我有这个代码:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  // the other code, irrelevant
}

还有一个HTML文件:

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="map"></div>
  <script async="async" defer="defer"
      src="https://maps.googleapis.com/maps/api/js?key=<token here>&callback=initMap">
    </script>
   <script src="script.js"></script>
</body>
</html>

如果我只运行这个文件,一切正常.但是,如果我运行它,webpack就会抱怨'initMap不是一个函数'.我查看了输出内部,似乎initMap被声明为不是全局函数,而是作为模块内部的函数或类似的东西,所以也许这就是问题.

我应该如何在webpack中使用Google Maps API？我知道我可以用我的脚本捆绑一些libs,比如反应,我应该这样做吗？这里的方法应该是什么？

UPD:这是我的webpack.config.js:

/* eslint-disable */
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const nodeModules = {}
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) …

我在index.html中插入了我的块的顺序问题.

我正在使用webpack2和HtmlWebpackPlugin.

我认为控制块顺序的是chunksSortMode选项.

HtmlWebpackPlugin 的文档说:

chunksSortMode:允许在将块包含到html之前控制块的排序方式.允许的值:'none'| 'auto'| '依赖'|'手册'| {function} - 默认:'auto'

有什么区别:

• 没有
• 汽车
• 依赖
• 手册

对于'功能'选项,这个答案给了我洞察力

我可能不会理解基本的东西,因为我希望从一开始就在文档中找到这些信息.

我按照此文档将我的 webpack v4 升级到 v5 https://webpack.js.org/migrate/5，之后我收到此错误。

TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
    at /home/ec2-user/abhisar/insights-master/frontend/node_modules/html-webpack-plugin/index.js:59:56
    at Hook.eval [as call] (eval at create (/home/ec2-user/abhisar/insights-master/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:100:1)
    at Hook.CALL_DELEGATE [as _call] (/home/ec2-user/abhisar/insights-master/frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/ec2-user/abhisar/insights-master/frontend/node_modules/webpack/lib/Compil

我可以做什么来解决这个问题？

我有这样的目录结构:

和node_modules内:

 >node_modules
  >./bin
   >webpack.config.js
  >bootstrap
   >bootstrap.css
   >bootstrap.js

我需要像这样生成单独的CSS和JS包:

custom-styles.css,custom-js.js,style-libs.css,js-libs.js

where style-libs和js-libsshould应该包含所有库的syles和js文件,如bootstrap和jQuery.这是我到目前为止所做的:

webpack.config.js:

const path = require('path');
const basedir = path.join(__dirname, '../../client');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const stylesPath = path.join(__dirname, '../bootstrap/dist/css');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  watch: true,

  // Script to bundle using webpack
  entry: path.join(basedir, 'src', 'Client.js'),
  // Output directory and bundled file
  output: {
    path: path.join(basedir, 'dist'),
    filename: 'app.js'
  },
  // Configure module loaders (for JS ES6, JSX, etc.)
  module: {
    // Babel …

我认为只有在某个资源被导入或需要某个资源并且资源与这样的加载器匹配时才会调用加载器.

但是在下面的代码中,没有html文件被导入到任何地方,但由于html中的下划线模板内容,仍然需要html-loader来进行编译.

所以我有以下问题:

1. html-loader什么时候开始玩？生成捆绑之后还是之前？
2. 为什么webpack会调用html-loader？由于插件中的模板设置？

3. 插件是否使用加载程序的输出？但输出只是一个字符串,它怎么会有所作为？

   //webpack.config.js
   const webpack = require('webpack');
   const path = require('path');
   const htmlPlugin = require('html-webpack-plugin');
   module.exports = {
       entry: {
           a: './a.js'
       },
       output: {
       filename: '[name].[chunkhash].js',
       chunkFilename: '[name].[chunkhash].js',
       path: path.resolve(__dirname, 'dist')
   },
   module: {
       rules: [
       {
         test: /\.html$/,
         loader: "html-loader"
       }
       ]
   },
   plugins: [
           new htmlPlugin({
           template:path.resolve(__dirname,'index.html')
   
       })
   ]
   };  
   
   //index.html
       <!DOCTYPE html>
       <html>
       <head>
           <title></title>
       </head>
       <body>
           <script id="item-template" type="text/template">    
           <label><%= title %></label>
         </script>
   
       </body>
       </html>
   

   Run Code Online (Sandbox Code Playgroud)