web-dev-qa-db-ja.com

webpack-dev-serverを使用している場合、html-webpack-pluginはjsファイルをindex.htmlに挿入しません

これが私の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またはnpmrun buildを実行すると、jsファイルが正常に挿入されます。ローカルホストにいるときに、html-webpack-pluginはjsファイルをindex.htmlに挿入することもできますか？

javascriptwebpackvue.jswebpack-dev-serverhtml-webpack-plugin
8
Xiangyu Zhang

この問題は、webpack-development-serverにローカルファイルシステムにファイルを書き込む機能がなく、代わりにそのファイルをMEMORY Onlyに書き込むという事実に特に関連しています。

これが、デフォルトのwebpackビルドコマンドを実行したときにHtml-Webpack-Pluginを使用してファイルを適切に生成できた理由です（[〜＃〜] not [〜＃〜]WDS/Webpack-Development-Server）with：

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またはnpmrun buildを実行すると、jsファイルが正常に挿入されます。localhostにいるときにhtml-webpack-pluginもjsファイルをindex.htmlに挿入できますか？」

要約すると、Html-Webpack-Pluginは、Webpack-Development-Serverの一部として使用されている場合、ローカルファイルシステムにファイルを書き込みません （WDS）Html-Webpack-Plugin[〜＃〜] will [〜＃〜]通常のwebpackビルドプロセス（WDSなし）を使用する場合は、（同一のwebpack構成で）ファイルを書き込みます。

5
Necevil

このような設定を試すことができます。

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

butテンプレートからプロジェクトを作成することをお勧めしますvue init webpack

このテンプレートはhtml-webpack-pluginを使用します

0
ridermansb

私は同じ問題を抱えており、以下の設定が機能します。

以前は絶対パスを使用していましたが、相対パスに変更すると機能します。

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