Question

这是我的webpack配置：

Just a

在package.json中：

当我运行npm start时，在localhost中，js文件未在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' };中注入。如果我运行webpack或npm run build，则会成功注入js文件。当我在localhost中时，"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --inline", "build": "webpack --config webpack.config.prod.js" },还可以将js文件注入index.html吗？

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.js示例附带的npm脚本（位于package.json内部）：

npm run build

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

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

“如果我运行webpack或npm run build，则会成功注入js文件。当我在localhost时，html-webpack-plugin是否也会将js文件注入index.html？”

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

Answer 2

您可以尝试这样的配置..

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

Answer 3

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

我曾经有绝对路径，当将其更改为相对路径时，它可以工作。

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

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

3 个答案: