Tag: html webpack plugin

不是来自webpack的内容是从/ dist提供的: webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry:'./src/app.js', output:{ path:path.join(__dirname, 'dist'), filename:'app.bundle.js', publicPath:'/dist/' }, , devServer: { contentBase: path.join(__dirname, "dist"), compress: true, stats: "errors-only", openPage: '', port:9000, open:true }, plugins: [new HtmlWebpackPlugin({ title:'Forum', filename:'index.html' //template:'./src/app.html' })] } 我的项目结构： ├── forum │ └── dist └── app.bundle.js ├── src │ ├── app.html […]

使用HtmlPlugin从一个子目录为webpack构build资源: 我目前使用WebpackHtmlPlugin来简化我的index.html入口点，但是我的主要问题是index.html与所有其他资源（即publicPath所指向的任何地方）处于同一级别。我想有一个文件夹中提供的index.html和webpack在子文件夹中生成的所有资产。像这样的东西 index.html build/ bundle.js 1.bundle.js 2.bundle.js 有没有什么办法可以达到这个目的，而不会违背webpack手动映射每个资产，并将publicPath设置为root？

用html-webpack-plugin在开发模式下在webpack中构buildHTML: 我正尝试使用html-webpack-plugin使用index.ejs构build单独的HTML文件。我的index.ejs有以下代码块。 <% if (process.env.NODE_ENV === 'production') { %> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script> <% } %> 我只想在生产中加载这些脚本。在我的webpack文件中，我正在加载HtmlWebpackPlugin来指定ejs模板的位置。 plugins: [ new HtmlWebpackPlugin({ template: 'index.ejs' }), … 当我在生产模式下使用–env.prod运行webpack时，它将把文件正确地构build到我的public目录中。但是，当我运行–env.dev ，这个插件不运行。我如何在开发模式下运行HtmlWebpackPlugin来构build特定于我的开发环境的HTML文件？

如何在使用HtmlWebpackPlugin的正文代码之前注入bundle source？: 我正在使用谷歌地图API与webpack，要生成谷歌地图，它应该加载API文件之前加载包文件。但是HtmlWebpackPlugin把bundle文件放在body元素的底部。如何在捆绑文件之前加载捆绑包？这是我的webpack.config.js下面。 const webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server',"./public/entry.js"], output: { path: path.resolve(__dirname, 'dist'), filename: "bundle-[hash].js", publicPath: path.resolve(__dirname, '/') }, devServer: { hot: true, inline: true }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.jade$/, loader: "pug-loader"} ] […]

如何使用HTMLWebpackPlugin通过webpack加载图像？: 我正在使用HTMLWebpackPlugin，并在我的模板中有一个img标签： <img src="./images/logo/png"> 如果你注意到，在这里我使用了一个相对path思维的webpack将触发configuration在我的webpack.config.js文件中的文件加载器，但编译后，我得到了完全相同的src属性在我的html： <img src="./images/logo/png"> 我怎样才能触发webpackdynamicreplace这些相对path，以及无论我在我的webpackconfigurationconfiguration？

Webpack html插件不会生成html: 我正在使用webpack html插件从graphiql.ejs生成html页面，但是当我运行npm start时，它不会生成html页面 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 }) […]