html-webpack-plugin无法在webpack-dev-server中正常工作。

Question

Webpack，你会让我崩溃的。

在生产环境中，html-webpack-plugin能够正常工作。'dist'文件夹中装载了我的HTML模板，并插入了打包后的代码。很好，很酷。

然而，在webpack-dev-server中却不行。它似乎创建了自己的HTML页面，标题为“Webpack App”，然后提供服务。这是从哪里来的呢？我需要在开发和生产环境中保持一致，以便查看内容。我使用 webpack-merge 合并不同的配置。

• webpack: 4.29.6
• webpack-cli: 3.3.0
• webpack-dev-server: 3.2.1
• html-webpack-loader: 0.0.5,
• html-webpack-plugin: 3.0.7

webpack.common

module.exports = {
    entry: [
        "react-hot-loader/patch",
        resolve("src", "entry.js")
    ],
    output: {
        filename: "bundle.js",
        path: resolve('dist'),
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [resolve(__dirname, 'node_modules')],
                use: [{ loader: 'babel-loader'}]
            },
            {
                test: /\.s(a|c)ss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'sass-loader'
                }]
        }
      ]
    },
    resolve: {
          extensions: [".js", "jsx"],
      alias: {
        actions:     resolve(__dirname, 'src', 'actions'),
        components:  resolve(__dirname, 'src', 'components'),
        lib:         resolve(__dirname, 'src', 'lib'),
        routes:      resolve(__dirname, 'src', 'routes'),
        store:       resolve(__dirname, 'src', 'store'),
        styles:      resolve(__dirname, 'src', 'styles'),
        test:        resolve(__dirname, 'src', 'test'),
      },
      modules: [
        resolve(__dirname, 'node_modules'),
        resolve(__dirname, 'src')
      ]
  },
    plugins: [
       new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       "template": resolve(__dirname, "src", "index.html"),
       "filename": resolve(__dirname, "dist", "index.html"),
       "hash": true,
       "inject": true,
       "compile": true,
       "favicon": false,
       "minify": true,
       "cache": true,
       "showErrors": true,
       "chunks": "all",
       "excludeChunks": [],
       "title": "React Starter",
       "xhtml": true,
       "chunksSortMode": 'none' //fixes bug
     }),
     new CleanWebpackPlugin(['dist'])
    ]
}

webpack.dev

module.exports = merge(common, {
    devtool: "eval-source-map",
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 3000,
        open: true
    }
});

- Coco

Answer 1

Webpack开发服务器不会将文件写入dist文件夹，它会从内存中提供捆绑包。但是，如果您使用contentBase选项（默认为当前工作目录），它将从磁盘中提供这些文件。虽然内存中的文件优先于contentBase文件。

- Saransh Kataria

---

那么，我的问题现在是如何让html-webpack-plugin与webpack-dev-server一起工作。 contentBase选项是否启用了它？ - Coco

Answer 2

看起来自从我几年前学习webpack以来，事情有些变化了。它会创建自己的HTML文件，除非你告诉它不要这样做。所以现在要这样做：

npm i -D html-loader

在您的开发配置中设置这些部分：

devServer: {
    contentBase: './dist'
},

...  

module: {
    rules: [
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
    ]
    ...

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/template.html'
        })
    ]
    ...
}

现在你的template.html文件可以正常工作了。

- Coco