HTML-的WebPack - 插件不注入JS使用的WebPack-DEV-服務器

這裏當文件到index.html的是我的WebPack配置：HTML-的WebPack - 插件不注入JS使用的WebPack-DEV-服務器

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運行構建，js文件被成功注入。當我在本地主機時，html-webpack-plugin是否可以將js文件注入到index.html？

來源

2016-09-20 Xiangyu Zhang

你可以嘗試配置這樣的..

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-插件

來源

2016-09-20 21:14:22 ridermansb

這個問題是專門的事實的WebPack - 發展 - 服務器沒有將文件寫入到本地文件系統的能力相關，而是寫入其文件到MEMORY Only。

這就是爲什麼你能有正確生成問心無愧的HTML的WebPack-插件文件，當您運行默認的WebPack生成命令（不的WDS /的WebPack開發服務器）：

webpack

或者因爲你使用vue.js的WebPack - 簡單的項目（https://github.com/vuejs-templates/webpack-simple/tree/master/template），你也可以通過使用附帶的vue.js樣本（位於您的package.json內部）的NPM腳本：

npm run build

在這兩種情況下，文件被寫入到目錄中，就像你認爲應該是這樣，因爲使用webpack的Building編寫CAN文件系統，在使用Webpack-Development-Server時沒有文件被寫入（這又不起作用，因爲WDS寫入內存而不是本地文件系統）。

我同樣感謝您的評論問題上工作時，無意中發現了這個答案：

「如果我跑的WebPack或NPM運行構建，JS文件被成功注入可以的HTML的WebPack，插件也當我在本地主機時，將js文件注入到index.html中？「

綜上所述：的HTML的WebPack-插件不會寫文件時，它被用作的WebPack - 發展 - 服務器（WDS）的一部分的本地文件系統，即使HTML的的WebPack -Plugin 將使用正常的WebPack構建過程（無WDS）時寫入文件（具有相同的WebPack構型）。

來源

2017-01-03 20:33:50 Necevil

請問https://github.com/jantimon/html-webpack-harddisk-plugin幫助？ – jantimon

謝謝@jantimon我的用例是非常專業的，因爲我運行Docker容器（webpack等）的所有內容。我正在使用webpack構建我的Vuejs項目，而無需在本地環境中安裝節點等。我沒有嘗試插件，因爲我的問題最終導致了我對WDS的期望。 – Necevil

HTML-的WebPack - 插件不注入JS使用的WebPack-DEV-服務器

回答

相關問題