标签: html-webpack-plugin

这是我的webpack配置:

var path = require('path');
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var fs = require('fs'),buildPath='./dist/';
var folder_exists = fs.existsSync(buildPath);

if(folder_exists == true)
{
    require('shelljs/global')
    rm('-rf', 'dist')

};

module.exports = {

    entry: './src/main',

    output: {
        path: path.join(__dirname, './dist'),

        filename: '[name].js',

        publicPath: '/dist/'

    },


    devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        grogress: true,
    },
    // "vue-hot-reload-api": "^1.2.2",

    module: {

        loaders: [

            { test: /\.vue$/, loader: 'vue' },

            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },

            { test: /\.css$/, loader: …

我想强制webpack为特定的文件/文件夹启用特定的插件或加载器,乘以文件.有办法吗？

问题是，当我使用HtmlWebpackPlugin和splitChunks时，无法将块注入到生成的html中。我对Webpack 4的配置是

var loading = {
  ejs: fs.readFileSync(path.resolve(__dirname, 'template/loading.ejs')),
  css: fs.readFileSync(path.resolve(__dirname, 'template/loading.css')),
};

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.[hash].js',
    chunkFilename: '[name].[chunkhash].js',
  },
  mode: 'production',
  // ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use: 'happypack/loader?id=babel',
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader?cacheDirectory'],
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'template/index.ejs'),
      loading: loading,
    }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: …

我是 webpack 的新手，我正在使用 webpack 创建一个 React 应用程序。编译时出现此错误TypeError: $ is not a function。

我没有使用 jquery，但我的节点模块包含一些第三方库。

我只能找到一篇与此问题相关的文章，但它与 jquery 相关。 Webpack - $ 不是函数

我的 webpack 和 babel 配置有什么问题吗：

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env) => {
	console.log("WEBPACK ENV: ", env);

	const isDevMode = env !== "production";

	let config …

我正在使用Webpack html-webpack-plugin及其提供的模板.我想在标题中添加一个favicon列表:

<link rel="apple-touch-icon" sizes="57x57" href="<%= htmlWebpackPlugin.extraFiles.apple-touch-icon-57x57 %>">
<link rel="apple-touch-icon" sizes="60x60" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav60%>">
<link rel="apple-touch-icon" sizes="72x72" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav72%>">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="favicons/manifest.json">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#e53935">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="favicon/mstile-144x144.png">
<meta name="theme-color" content="#e53935">

如何在我的webpack构建中包含所有favicons,有或没有 …

我们目前正在使用Webpack和HtmlWebpackPlugin为我们的网页生成我们的javascript构建.

new HtmlPlugin({
    template: 'www/index-template.html',                //source path - relative to project root
    filename: 'index.html',                             //output path - relative to outpath above
    hash: true,
    cache: true                                         //only emit new bundle if changed
}),

这会导致将哈希添加到捆绑的javascript文件的查询字符串中.

<script type="text/javascript" src="/build/vendor.min.js?4aacccd01b71c61e598c"></script><script type="text/javascript" src="/build/client.min.js?4aacccd01b71c61e598c"></script>

使用任何标准桌面或移动浏览器时,新版本会正确缓存,并且无需用户付出任何努力即可加载新版本的网站.但是,我们还有一个chrome web app实现,我们称之为:

chrome.exe --app = http:// localhost:65000 --disable-extensions

在这个应用程序中,由于某种原因,javascript构建结束时的哈希不会破坏缓存.我们必须手动右键单击页面上的某个位置,然后单击重新加载(或按F5).由于某种原因,缓存未在Web应用程序中被破坏.

我在想它可能是在缓存index.html文件吗？这可能导致应用程序永远不会在构建上收到更新的哈希值.如果是这种情况,我不知道如何解决这个问题.

我还注意到,如果我们的localhost服务器关闭,页面仍会加载,就像服务器正在运行一样.这向我指示某种离线缓存.我检查了manifest.json参数,找不到任何强制重新加载的东西.

我也试过这些镀铬命令行开关,它们都没有帮助: - disk-cache-size = 0, - aggressive-cache-discard, - disable-offline-auto-reload.

另一个警告是我们需要保留localStorage数据及其cookie.在标准浏览器窗口或任何浏览器中,它可以正常工作,但不适用于Chrome网络应用程序中.

我正在使用Webpack在我的HTML,CSS和JS上加载图像.

我的配置是:

{
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    entry: [
        'angular', './src/lib.js', './src/app.js',
    ],
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
},
module: {
    rules: [{
        test: /\.(jpe?g|png|gif|svg)$/i,
         loader: ['file-loader?name=[name].[ext]&outputhPath=images/&publicPath=images/'],
    },{
        test: /\.css|scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader']
        })
    },{
        test: /\.html$/,
        exclude: [
            path.join(__dirname, '/src/index.html')
        ],
        use: [
            { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src'))},
            { loader:  'html-loader'},
            ]
        }],
    },
    plugins: [
        new …

我在 React 项目上使用 Webpack，它似乎以一种我不理解的奇怪方式HtmlWebpackPlugin影响了webpack 开发服务器。

它似乎允许我浏览到index.html该文件在代码库中的任何位置，这是单独使用开发服务器无法实现的。

假设我有以下目录结构：

myproj/
  |- package.json
  |- webpack.config.js
  |- src/
    |- index.html
    |- index.jsx

和一个webpack.config.js看起来像这样的文件：

const path = require('path');

module.exports = {
    entry: './src/index.jsx',
   
    devServer: {
        contentBase: __dirname
    }
};

然后我跑webpack-dev-server --mode=development。由于我已devServer.contentBase设置为当前目录 ( myproj) 并且index.html文件在里面myproj/src，因此我必须浏览http://localhost:8080/src/index.html以查看我的 Web 应用程序。如果我尝试浏览，http://localhost:8080/index.html则会得到 404。这对我来说很有意义。

然后我添加了HtmlWebpackPlugin，里面没有改变任何东西webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
....
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }) …

我想在 Webpack 捆绑期间将一些 HTML 从一个文件注入另一个文件。

假设我有一个 index.html 文件，如下所示：

//index.html
<html>
    <head></head>
    <body>
        <p>Hello World</p>
    </body>
</html>

和另一个带有一堆图标的文件：

//another.html
<symbol id="a" ...>...</symbol>
<symbol id="b" ...>...</symbol>
<symbol id="c" ...>...</symbol>

然后我希望我的“index.html”文件在运行 webpack 后看起来像这样：

//index.html in bundle
<html>
    <head></head>
    <body>
        <symbol id="a" ...>...</symbol>
        <symbol id="b" ...>...</symbol>
        <symbol id="c" ...>...</symbol>
        <p>Hello World</p>
    </body>
</html>

基本上，我只想将文件中的任何内容包含在我的 index.html 正文中。我已经环顾了整个 webpack 生态系统，但我找不到任何可以做我想要的东西。

我现在拥有的 webpack 配置正在使用html-webpack-plugin：

{
    ....
    plugins: [
        new HtmlWebpackPlugin({
            template: "index.html",
            inject: true,
        })
    ],
}

有问题的文件取自我的一个依赖项，因此我无法在那里进行任何更改或手动复制内容，但我知道包含它们的文件夹的路径，所以我希望我可以使用加载程序/plugin 来为我处理这个问题。

问题：是否有一个 webpack 加载器/插件可以做到这一点？

我正在尝试将 CSS 模块用于 html，由 html-webpack-plugin 生成。

重现错误的代码

源代码/索引.ejs

<div class="<%= require('./item.css').foo %>"></div>

源代码/样式.css

<div class="<%= require('./item.css').foo %>"></div>

此代码与以下配置捆绑在一起，以某种方式工作（css 模块散列类名找到了生成的方式index.html）：

webpack.config.js

.foo {
  color: red
}

但问题是 CSS 块没有被 emmited。

% npm run build -- --mode production

> simple-nunjucks-loader-example-isomporphic@1.0.0 build /Users/user/Projects/nunjucks-loader/examples/isomorphic
> webpack "--mode" "production"

Hash: 5edf5687d32d114e6469
Version: webpack 4.41.5
Time: 526ms
Built at: 01/02/2020 10:51:04 PM
     Asset       Size  Chunks             Chunk Names
index.html   98 bytes          [emitted]  
   main.js  930 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 1.43 …