dev-server，我的 webpack 将构建包含 jquery 的包。
我使用 html-webpack-plugin，下面的代码行将在构建产品时将我的包注入到正文中。
new HtmlWebPackPlugin({
template: './src/index.html'
}),
我的问题是，在我的index.html中，我有semantic-ui.js，它依赖于Jquery，
<body>
<my-app>loading...thaison</my-app>
<script src="./asset/semantic-ui/dist/semantic.min.js"></script>
</body>
因此，当我触发我的开发环境或产品构建时，捆绑包出现在语义之后，因此我有一个错误。如何使开发注入发生在我的手动脚本源之前？
开发服务器服务：
webpack-dev-server --inline --progress --port 4000 --content-base src
我有一个正在工作的webpack 1项目，我想迁移到webpack 2。
它几乎可以正常工作，我主要的剩余问题是html-webpack-plugin：
当我在webpack 2中使用它时，生成的脚本标签具有以下形式：
<script type="text/javascript" src="static/js/bundle.js"></script>
代替：
<script type="text/javascript" src="/static/js/bundle.js"></script>
注意：使用相同的插件选项，它可以在Webpack 1中正常工作。
这是webpack conf的相关部分：
entry: [
paths.appIndexJs,
publicPath,
],
output: {
pathinfo: true,
path: paths.appBuild,
filename: 'static/js/bundle.js',
},
// (...)
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
我究竟做错了什么？
我目前正在尝试使用命令set NODE_ENV=production && webpack(Window User)运行 webpack但是 src 目录中没有名称为 bundle.js 的输出，实际上没有输出文件。
到目前为止，我只使用了 webpack-dev-server，所以这是我第一次尝试使用插件构建配置文件。我试过的 webpack-dev-server 运行正常。
src 文件夹包含我的所有文件，包括 html 和 javascript。
我需要一个带有工作缩小和压缩代码的输出文件。请帮助和建议！
下面是在终端中找到的
Hash: 09ea2200290287327c75
Version: webpack 1.13.2
Time: 6976ms
Asset Size Chunks Chunk Names
bundle.js 3.48 MB 0 [emitted] main
[0] multi main 28 bytes {0} [built]
[1] ./src/index.js 2.73 kB {0} [built]
+ 12 hidden modules
我确实有一个具有以下配置的 webpack.config.js 文件。
const path = require('path');
const webpack = require('webpack');
const debug = process.env.NODE_ENV !== "production";
module.exports = {
entry: [ …javascript angularjs webpack webpack-dev-server html-webpack-plugin
我的目标是替换像这样的字符串
<!--configjs-->
同
<script src="/api/config?bundle-hash"></script>
在我的index.html文件中
我正在使用https://github.com/AngularClass/NG6-starter
plugins: [
// Injects bundles in your index.html instead of wiring all manually.
// It also adds hash to all injected assets so we don't have problems
// with cache purging during deployment.
new HtmlWebpackPlugin({
template: 'client/index.html',
inject: 'body',
hash: true
})
]
TL; DR 检查最后一段
我的方案： 我有以下文件：
</head>）</body>）</body>在vendor.js之后的html中添加）HTML Webpack插件正在我的html模板中添加以上文件。在这种情况下，首先，我的浏览器将无法发出下载请求vendor，app而必须等待样式表首先被下载。那很糟。其次，当脚本已经SSR呈现html时，我的脚本将不必要地停止DOM呈现第一幅画。
对于第二个，我将defer它解决它。但是首先，为什么defer在DOM构建中不需要脚本（只是功能）时，为什么我的脚本必须等待样式表下载，甚至包括那些脚本！
因此，我想将其放置deferred scripts在可能的head标记内，html webpack plugin但我想将其放置在style标记之前（对于外部样式表），以使浏览器可以并行请求这些脚本而不用等待而受益。
首先，您认为这是个好主意吗？（可能是因为浏览器只能具有有限的并行连接，所以，它可能会阻止下载图像等。或者可能是现代的浏览器在尝试使用html并请求延迟脚本时会自动执行此操作，但这只是最近的浏览器，并非它吗？）
其次，如何使用html webpack插件实现将延迟脚本放在样式标签之前？ （我想特别知道这一点）
html javascript deferred-loading webpack html-webpack-plugin
我正在尝试使用带HtmlWebpackPlugin插件的Webpack缩小我的html文件。我设法将index.html文件制作到dist加载程序中，但是在缩小文件时遇到了一些麻烦。
dist/
node_modules/
src/
ejs/
js/
css/
server.js
webpack.config.js
package.js
webpack.config.js：
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
devtool: 'source-map',
output: {
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.ejs$/,
use: ['ejs-loader']
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
url: false,
minimize: true,
sourceMap: true
}
}]
})
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/ejs/index.ejs',
minify: true
}),
new …在部署到 heroku 时，我收到以下错误。我无法解决它，因为我对 html-webpack-plugin 一无所知。请帮助。我的代码-https://github.com/utkarsh-cmd/Shop_INN
Creating an optimized production build...
remote: Failed to compile.
remote:
remote: Error: html-webpack-plugin could not minify the generated output.
remote: In production mode the html minifcation is enabled by default.
remote: If you are not generating a valid html output please disable it manually.
remote: You can do so by adding the following setting to your HtmlWebpackPlugin config :
remote: |
remote: | minify: false
remote: |
不管你信不信，我花了一些时间试图找到一种将网站图标添加到Single Spa应用程序的方法：)。我在框架文档中找不到任何内容。有一些关于静态资产的零碎信息，但它对我并没有多大帮助。我最终意识到这与 Webpack 配置有关。请参阅下面我的回答。
我用ejs看过这篇文章.但是我如何通过webpack实现同样的目标呢？
我尝试使用nunjucks-loader html-webpack-plugin,但是我收到以下错误:[nunjucks-loader] non-web targets are not supported.
这是我的代码:
这是配置:
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
//template: './client/index.html',
filename: 'index.html',
inject: 'body',
template: 'nunjucks-html-loader!./client/templates/index.njk',
});
module: {
loaders: [
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.|njk|nunjucks$/,
use: ['nunjucks-loader']
}]
};
我目前正在创建一个涉及flask和webpack的项目。当前，flask服务器能够找到启示模板，但是无法找到相关的JavaScript。
我有一个使用webpack html插件创建HTML文件的webpack配置，如下所示：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {app: './src/index.js', print: './src/print.js'},
output: {filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist')},
plugins: [new HtmlWebpackPlugin({template:"./src/index.html"}), new CleanWebpackPlugin(['dist'])],
};
这将在src目录中使用名为index.html的模板，其中包含以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow World</title>
</head>
<body>
<h1>It Works</h1>
</body>
</html>
webpack应该将其与以下javascript index.js捆绑在一起：
import _ from 'lodash';
import printMe from './print.js';
function component() {
let element = document.createElement('div');
let btn = document.createElement('button');
// lodash now imported
element.innerHTML = _.join(['Hello', 'webpack'], …