那些遇到过的问题

标签: html-webpack-plugin

如何使用Webpack-dev-server和HTML-webpack-plugin将.html输出到磁盘

我使用webpack并使用html-webpack-plugin生成的脚本包更新我的index.html文件,例如bundle.[hash].js.

然后我必须运行webpack-dev-server所以我可以将该包加载到内存中并利用热模块替换.

这使代码编译两次.

但是,我想要的是webpack-dev-server能够使用new更新index.html文件bundle.[hash].js,因为现在我必须运行webpack后跟webpack-dev-sever.编译两次似乎很奇怪.

同样,我运行的唯一原因webpack是使用bundle的新哈希更新我的index.html文件.如果我可以webpack-dev-server将更新的index.html输出到磁盘,那么我可以webpack完全放弃命令.

这可能吗？如果是这样,webpack配置会改变什么？我的webpack配置很长,所以我认为在这里发布它会有所帮助.

webpack webpack-dev-server webpack-hmr html-webpack-plugin webpack-hot-middleware

Tet*_*Dev
lucky-day
5
推荐指数
2
解决办法
2096
查看次数

webpack html(ejs)包含其他模板

所以这是我的webpack配置:

import path from 'path';

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


module.exports = {
    entry: {
        index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // publicPath: 'http://localhost:3000/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, "node_modules"),
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            template: 'ejs!./dev/index.ejs',
            inject: 'body'
        })
    ]

};
Run Code Online (Sandbox Code Playgroud)

我的index.ejs档案:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%- include html/one/1.ejs %>

</body>

</html>
Run Code Online (Sandbox Code Playgroud)

我的文件夹结构:

dev/
  /assets …
Run Code Online (Sandbox Code Playgroud)

template-engine ejs webpack webpack-dev-server html-webpack-plugin

Mar*_*cer
lucky-day
5
推荐指数
2
解决办法
6532
查看次数

webpack-dev-server 404＆如何正确设置？

我来自哪里

我已经使用webpack已有一段时间了，但这是我第一次没有为此修改入门套件，而是尝试从头开始进行所有设置。

我跟随着Surviv.js.com上的这篇不错的文章，并继承了那里描述的一些方法，将它们与我的一些早期设置结合在一起（例如根据发送的生产变量设置不同的名称和路径）。

在讲座期间，我尝试尽可能多地运行“构建”和“开始”，以免被无法跟踪的意外行为所困扰。这很好。

然后在某个时候摆弄有关从第三方框架中排除未使用的CSS 的章节时，我以某种方式破坏了开发服务器的设置。（"run build"仍然有效！）

问题

我的热服务器定义为192.168.1.2:3000（这正是我想要的方式）。当我webpack-dev-server使用下面进一步显示的设置运行时，在该位置显示404（无法获取/）。现在，我已经读了很多有关如何正确设置webpack开发服务器的信息，但是由于我仍然不完全了解如何正确设置Webpack开发服务器，所以我仍然做得不好...（很可能不是这里一个人...）。路径有效。

这是我的理解（通用开发服务器设置）：

（如果我在这方面有误，请帮助我）

  • 我的输出路径webpack.config.js只会在运行开发服务器时在内存中提供，因此在物理上是不可见的（path: path.join(__dirname, 'devServerFolder'例如，如果输出是我创建的文件夹，那么如果在我的项目结构中找不到该文件夹​​，我将永远看不到该文件夹​​） ）
  • 静态index.html指向我bundle.js将一个文件夹中需要的地方我指向与publicPath以及与contentBase（这可能是我的devServerFolder，我就需要创建与index.html它;通常在网络上大部份的设定同样public使用的文件夹来保存生产建立）
  • 如果我使用html-webpack-plugin该插件，它将自动为我生成该文件，而无需指向任何内容，因为bundle.js被插件写入了该文件

这些是真正使我难以理解的要点。我已经尝试了很多。的。不同。结合使用publicPath和contentBase设置时，运气不佳，无法重新建立我的开发服务器（工作正常）。 请注意，我在代码或使用编译我的版本时没有任何问题run build，它们可以正常运行并且应该正常运行。

配置

资料夹结构

webpack.test
|
| - app                    // App folder
     |
     | …
Run Code Online (Sandbox Code Playgroud)

configuration webpack webpack-dev-server html-webpack-plugin hot-module-replacement

Mar*_*ian
2017 05-23
5
推荐指数
1
解决办法
5454
查看次数

如何将html-webpack-plugin与现有Express模板一起使用？

我已经安装了express-generetor npm模块，并且喜欢使用玉模板作为模板来构造项目的方式。但是我也喜欢使用HTML-webpack-plugin生成自己的文件，将这两种方法集成在一起的最佳方法是什么？

express-generator html-webpack-plugin

Sup*_*per
2016 09-15
5
推荐指数
1
解决办法
976
查看次数

WebPack如何将所有css文件放入一个css文件中

我对WebPack还不熟悉,我希望能够获取CSS文件目录(.app/styles/[css files ...])并将它们输出到一个CSS文件(dist/styles.css)中.

目前,所有的JavaScript文件都被编译成一个单独的"index_bundle.js"文件,这是完美的,但我想为我的CSS文件实现相同的目标.

经过大量的"Google搜索"后,我发现WebPack的ExtractTextPlugin应该可以帮助解决这个问题,但这只适用于添加到"entry"属性的一个CSS文件(例如:entry:{style:". /app/styles/style.css"})然后将其作为链接标记添加到html的头部,这很好,但我希望我的所有css文件都进入一个styles.css文件,然后在html中使用它作为一个链接.

我当前的WebPack配置如下所示:

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

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractTextPluginConfig = new ExtractTextPlugin(
    "styles.css", 
    {
        allChunks: false
    }
);

module.exports = {
    entry: {
        index: "./app/index.js"//,
        //styles: "./app/styles/style1.css" // I don't want one file, I want to use a directory eg: "./app/styles/"
    },
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/, …
Run Code Online (Sandbox Code Playgroud)

javascript css webpack html-webpack-plugin

Fre*_*red
2016 11-01
5
推荐指数
1
解决办法
8249
查看次数

使用HTML Webpack插件生成模板

我想使用HTML Webpack插件生成模板。我不想从模板生成.html文件，我想从另一个.ejs模板生成.ejs模板。

我想这样做，以便从后端渲染模板时，可以根据环境插入不同的api键。例如，我想生成一个看起来像这样的模板：

...
<script>
   API.setKey('<%= APIKey %>');
</script>
...
Run Code Online (Sandbox Code Playgroud)

以便在登台时可以使用测试密钥。

是否可以使用HTML Webpack插件生成模板？

webpack html-webpack-plugin

oor*_*rst
lucky-day
5
推荐指数
1
解决办法
1489
查看次数

是否可以通过HtmlWebpackPlugin添加静态styles.css包含？

基本上我想有线 

<link rel="stylesheet" href="./customStyles.css">
Run Code Online (Sandbox Code Playgroud)

这将是样式资产中的最后一个.

customStyles.css 是在服务器上动态生成的(不是通过webpack)

所以我只想在这里粘贴这行html并确保它在所有自动生成的包含之后.

当我把它放在头部时,我有: 

<link rel="stylesheet" href="./customStyles.css">
<link href="styles/fonts.2d7979e72c5898d0367804a3b6e900d1.css" rel="stylesheet"/>
<link href="styles/styles.52389c21860a21759b3a2157c3e5730f.css" rel="stylesheet"/></head>
Run Code Online (Sandbox Code Playgroud)

webpack html-webpack-plugin

Ste*_*rov
lucky-day
5
推荐指数
0
解决办法
203
查看次数

VueJS-“ npm run build”不会在dist文件夹中生成index.html文件

我已经开发了一个VueJS项目。运行命令后

npm run build
Run Code Online (Sandbox Code Playgroud)

生成一个包含build.js文件和图像的dist文件夹。

但是/ dist中没有index.html文件。

我的项目结构如下所示

资料夹结构

我的webpack.config.js看起来像这样

npm run build
Run Code Online (Sandbox Code Playgroud)

如您所见，index.html文件位于src目录之外。有什么方法可以让我生成index.html文件，而不必将其放入/ src目录？

构建完成后，我尝试在Heroku上运行该应用程序以确保已加载。我收到这样的错误。

build.js错误 build.js有什么问题？

这是原始的index.html

let path = require('path');

let webpack = require('webpack');

let UglifyJsPlugin = require('uglifyjs-webpack-plugin');

let axios = require('axios');

let url = axios.defaults.baseURL;

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    plugins: [
        new HtmlWebpackPlugin(), // Generates default index.html
        new HtmlWebpackPlugin({ // Also generate a test.html
            filename: 'openseadragon.html',
            template: './openseadragon.html'
        })
    ],
    module: {
        rules: [{
                test: /\.vue$/,
                loader: …
Run Code Online (Sandbox Code Playgroud)

javascript webpack vue.js html-webpack-plugin vuejs2

Cod*_*rPJ
2018 06-08
5
推荐指数
1
解决办法
2888
查看次数

html-webpack-plugin是否可以从CSS生成&lt;style&gt;元素？

我有一个静态网站，正在使用Vue和Webpack。

我在一个名为的文件中有一些全局CSS规则，style.css并且正在使用import './styles.css'我的index.js文件导入这些规则。另外，我有一些.vue文件会生成自己的CSS。

要生成HTML页面，我正在使用html-webpack-plugin。

我的CSS规则似乎正确应用。但是，<style>包含它们的标签是<head>通过Webpack生成的Javascript 动态添加到我的页面的。我希望这些<style>标签改为静态地出现在生成的index.html文件中。有什么办法可以做到这一点？

另外，如果可能的话，我希望CSS被缩小。

这是我的webpack配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      } …
Run Code Online (Sandbox Code Playgroud)

javascript css webpack vue.js html-webpack-plugin

Adr*_*ian
2018 06-09
5
推荐指数
1
解决办法
5280
查看次数

htmlWebpackPlugin仅向生成的html添加一个入口点

以下是webpack配置条目：

entry:{
    background: './app/main/background.js',
    options: './app/main/options.js'
}
Run Code Online (Sandbox Code Playgroud)

提供给htmlwebpackplugin的一个HTML页面如下

new HtmlWebpackPlugin({
    template :'./app/templates/options.html',
    // chunks : ['jquery','angular','app'],
    filename: "./options.html",
    cache : true
}),
Run Code Online (Sandbox Code Playgroud)

这导致注入两个background.js，options.js在options.html页面如下图所示：

 <script type="text/javascript" src="js/background.js"></script><script type="text/javascript" src="js/options.js"></script></body>
Run Code Online (Sandbox Code Playgroud)

有没有一种方法可以将其限制为仅一个JS文件或指定要在html页面中注入的文件名？

plugins html-webpack-plugin webpack-2

Irs*_*had
2018 08-29
5
推荐指数
2
解决办法
1321
查看次数

标签 统计

html-webpack-plugin ×10

webpack ×8

javascript ×3

webpack-dev-server ×3

css ×2

vue.js ×2

configuration ×1

ejs ×1

express-generator ×1

hot-module-replacement ×1

plugins ×1

template-engine ×1

vuejs2 ×1

webpack-2 ×1

webpack-hmr ×1

webpack-hot-middleware ×1