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

Question

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

javascriptwebpackvue.jswebpack-dev-serverhtml-webpack-plugin

10

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

- Xiangyu Zhang

3个回答

0

我有同样的问题，下面的配置对我有效。

我以前使用绝对路径，当我改成相对路径时，它就起作用了。

new HtmlWebpackPlugin({
        inject: true,
        template:'public/index.html', // relative to project root 
        filename:'index.html'         // relative to build folder
    })

- Ahmad Dehnavi

-1

你可以尝试像这样的配置。

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

- ridermansb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Necevil · Accepted Answer

这个问题特别与webpack开发服务器无法将文件写入本地文件系统有关，而是将其文件只写入内存。

这就是为什么当你使用默认的webpack构建命令（而不是WDS/Webpack开发服务器）时，可以正确生成Html-Webpack-Plugin的文件。

webpack

如果您使用的是vue.js Webpack-simple项目(https://github.com/vuejs-templates/webpack-simple/tree/master/template)，则可以通过npm脚本来使用Vue.js示例中附带的脚本(位于package.json中)：

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)的一部分使用时不会将文件写入本地文件系统，即使在使用常规webpack构建过程（没有WDS）时，Html-Webpack-Plugin（使用相同的webpack配置）也将写入文件。