Need to replace paths when building in webpack?

T

tlswp2019-12-05 21:59:59

HTML

tlswp, 2019-12-05 21:59:59

You need to replace the paths to JS and CSS.
Now webpack is adding another one :<link>

<head>
  <title>Name</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="app.min.css" rel="stylesheet">
</head>

It needs to replace link:

<head>
  <title>Name</title>
  <link href="app.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Here is webpack.config:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    app: './src/script.js',
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, './build')
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: '/node_modules/'
      }, {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, {
          loader: 'css-loader',
          options: { sourceMap: true }
        }, {
          loader: 'postcss-loader',
          options: { sourceMap: true, config: { path: 'postcss.config.js' } }
        }]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].min.css',
    }),
    new HtmlWebpackPlugin({
      inject: true,
      hash: false,
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
}