使用 webpack-dev-server 时，html-webpack-plugin 不会将 js 文件注入 index.html

Question

这是我的 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 时，在本地主机中，js 文件未注入 index.html 中。如果我运行 webpack 或 npm run build，js 文件注入成功。当我在本地主机时， html-webpack-plugin 也可以将 js 文件注入 index.html 吗？

原文由 Xiangyu Zhang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题与 webpack-development-server 无法将文件写入本地文件系统而是将其文件写入 MEMORY Only 这一事实有关。

这就是为什么当您运行默认的 webpack 构建命令（ 不是 WDS / Webpack-Development-Server）时，您能够使用 Html-Webpack-Plugin 正确生成文件的原因：

 webpack

或者，由于您使用的是 vue.js Webpack-simple 项目（ https://github.com/vuejs-templates/webpack-simple/tree/master/template ），您还可以使用 Vue 附带的 npm 脚本。 js 示例（位于 package.json 中）通过：

 npm run build

在任何一种情况下，文件都按照您认为的那样写入目录，因为使用 webpack 构建可以写入文件系统，而使用 Webpack-Development-Server 时没有文件被写入（同样这不起作用，因为 WDS 写入到内存而不是本地文件系统）。

由于您的评论，我在处理相同问题时偶然发现了这个答案：

“如果我运行 webpack 或 npm run build，js 文件被成功注入。当我在本地主机时，html-webpack-plugin 是否也可以将 js 文件注入到 index.html 中？”

总结一下：Html-Webpack-Plugin 在用作 Webpack-Development-Server (WDS) 的一部分时 不会 将文件写入本地文件系统，即使 Html- Webpack -Plugin 会写入文件（使用相同的 webpack配置）在使用正常的 webpack 构建过程（无 WDS）时。

原文由 Necevil 发布，翻译遵循 CC BY-SA 3.0 许可协议