html-webpack-plugin 在使用 webpack-dev-server 时不会将 js 文件注入 index.html
Posted
技术标签:
【中文标题】html-webpack-plugin 在使用 webpack-dev-server 时不会将 js 文件注入 index.html【英文标题】：html-webpack-plugin not inject js file into index.html when using webpack-dev-server 【发布时间】：2017-01-27 21:09:36 【问题描述】：这是我的 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: 'style-loader!css-loader',
//install css-loader style-loader sass-loader node-sass --save-dev
test: /\.scss$/, loader: 'style!css!sass?sourceMap',
test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192&name=images/[name].[ext]',
test: /\.(html|tpl)$/, loader: 'html-loader' ,
]
,
vue:
loaders:
js:'babel',
css: 'style-loader!css-loader',
sass:'style!css!sass?sourceMap'
,
babel:
presets: ['es2015'],
plugins: ['transform-runtime']
,
plugins:[
new HtmlWebpackPlugin(
template: 'index.html',
filename: './index.html',
inject:true
),
],
resolve:
extensions: ['', '.js', '.vue'],
alias:
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
,
devtool: 'eval-source-map'
;
在 package.json 中：
"scripts":
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline",
"build": "webpack --config webpack.config.prod.js"
,
当我运行 npm start 时，在 localhost 中的 js 文件不会注入 index.html。
如果我运行 webpack 或 npm run build，js 文件注入成功。
html-webpack-plugin 也可以在我在 localhost 时将 js 文件注入到 index.html 中吗？
【问题讨论】：
【参考方案1】：此问题与 webpack-development-server 无法将文件写入本地文件系统而是将其文件写入仅限内存这一事实有关。
这就是为什么当您运行默认的 webpack 构建命令（NOT WDS / Webpack-Development-Server）时，您能够使用 Html-Webpack-Plugin 正确生成文件：
webpack
另外，由于您使用的是 vue.js Webpack-simple 项目 (https://github.com/vuejs-templates/webpack-simple/tree/master/template)，您还可以通过以下方式使用 Vue.js 示例（位于 package.json 中）附带的 npm 脚本：
npm run build
在任何一种情况下，文件都被写入目录，因为使用 webpack 构建可以写入文件系统，而使用 Webpack-Development-Server 时没有写入文件（同样，这不起作用）因为 WDS 写入内存而不是本地文件系统）。
感谢您的评论，我在处理同一问题时偶然发现了这个答案：
"如果我运行webpack或者npm run build，js文件注入成功。我在localhost时html-webpack-plugin也能注入js文件到index.html吗？"
总结一下： 当 Html-Webpack-Plugin 用作 Webpack-Development-Server (WDS) 的一部分时，Html-Webpack-Plugin 不会将文件写入本地文件系统，即使 Html-Webpack-Plugin 将在使用正常的 webpack 构建过程（无 WDS）时写入文件（具有相同的 webpack 配置）。
【讨论】：
感谢@jantimon，我的用例非常专业，因为我在 docker 容器（webpack 等）中运行所有内容。我正在使用 webpack 来构建我的 Vuejs 项目，而无需在我的本地环境中安装节点等。我没有尝试该插件，因为我的问题最终通常是我对 WDS 等的期望的概念问题。【参考方案2】：我有同样的问题，下面的配置对我有用。
我曾经有绝对路径，当将其更改为相对路径时，它可以工作。
new HtmlWebpackPlugin(
inject: true,
template:'public/index.html', // relative to project root
filename:'index.html' // relative to build folder
)
【讨论】：
【参考方案3】：你可以试试这样的配置..
new HtmlWebpackPlugin(
filename: 'index.html',
template: 'index.html',
inject: true
)
和Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My App</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
你需要安装npm i -D html-webpack-plugin vue-loader vue-html-loader
但是我建议你从模板创建一个项目，vue init webpack
此模板使用 html-webpack-plugin
【讨论】：
以上是关于html-webpack-plugin 在使用 webpack-dev-server 时不会将 js 文件注入 index.html的主要内容，如果未能解决你的问题，请参考以下文章
webpack 插件： html-webpack-plugin
webpack-dev-server和html-webpack-plugin的简单使用
使用`html-webpack-plugin`插件配置启动页面
html-webpack-plugin 在使用 webpack-dev-server 时不会将 js 文件注入 index.html