使用webpack-dev-server时，html-webpack-plugin不会将js文件注入index.html [英] html-webpack-plugin not inject js file into index.html when using webpack-dev-server
问题描述
这是我的webpack配置：
Here is my webpack config :
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中：
And in 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文件。
当我在localhost时， html-webpack-plugin 还会将js文件注入 index.html ？
When I run npm start, in localhost the js file is not injected in index.html.
If I run webpack or npm run build, the js file is injected successfully.
Can html-webpack-plugin also inject js file into index.html when I'm in localhost?
推荐答案
此问题与webpack-development-server无法将文件写入的事实有关您的本地文件系统，而是将其文件写入 MEMORY Only 。
This issue is related specifically to the fact that the webpack-development-server does not have the ability to write files to your local file system and instead writes its files to MEMORY Only.
这就是为什么您能够使用Html-Webpack-正确生成文件的原因运行默认webpack构建命令（不 WDS / Webpack-Development-Server）时的插件：
This is why you were able to properly generate files wth Html-Webpack-Plugin when you run the default webpack build command (NOT the WDS / Webpack-Development-Server) with:
webpack
或者，因为您使用的是vue.js Webpack-simple项目（ https://github.com/vuejs-templates/webpack-simple/tree/master/template ）您还可以使用Vue.js示例附带的npm脚本（位于package.json内部） ）via：
Alternately since you were using vue.js Webpack-simple project (https://github.com/vuejs-templates/webpack-simple/tree/master/template) you were also able to use the npm scripts that come with the Vue.js sample (located inside of your package.json) via:
npm run build
在任何一种情况下都会将文件写入目录，就像你认为的那样，因为使用webpack构建CAN可以编写文件系统，因为使用Webpack-Development-Server时没有写入文件（再次这不起作用，因为WDS写入内存而不是本地文件系统）。
In either case the files ARE written to the directory as you would have thought they should be since Building with webpack CAN write the file system, where as no files were written when using Webpack-Development-Server (again this does not work because WDS writes to memory and not the local file system).
由于您的评论，我在处理同样的问题时偶然发现了这个答案：
I stumbled onto this answer when working on the same problem thanks to your comment:
如果我运行webpack或npm run build，则会成功注入js文件。当我在localhost时，html-webpack-plugin还可以将js文件注入index.html吗？
"If I run webpack or npm run build, the js file is injected successfully. Can html-webpack-plugin also inject js file into index.html when I'm in localhost?"
总结：
Html-Webpack-Plugin 不会将文件作为Webpack-Development-Server（WDS）的一部分写入本地文件系统，即使Html-Webpack-Plugin
To sum up: Html-Webpack-Plugin WILL NOT write files to the local file system when it is used as a part of the Webpack-Development-Server (WDS) even though Html-Webpack-Plugin WILL write files (with an identical webpack configuration) when using the normal webpack build process (no WDS).
这篇关于使用webpack-dev-server时，html-webpack-plugin不会将js文件注入index.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
