Why doesn't html-webpack-plugin work for me?

K

karmyskove2021-07-18 11:14:05

JavaScript

karmyskove, 2021-07-18 11:14:05

Hello everyone, I’m following the example from the documentation, there was some kind of error, I can assume that the problem is in the paths, but I’ve already gone through all the possible options, tell me what I’m doing wrong?

Example code from documentation:

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

Мой код: 

<code lang="javascript">
plugins: [
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, 'src/index.html'),
      filename: 'index.html',
    }),
 ]
</code>

Путь мной использованный в template я уже использовал, только в конце дописал index.html, как было сделано в документации. Кстати ошибка появляется не только в консоли, но и в файле index.html.

Код ошибки

<code lang="html">
<head><script defer src="./js/main.js"></script></head>Html Webpack Plugin:
<pre>
  Error: Child compilation failed:
  Module not found: Error: Can't resolve 'D:\#Frontend\Верстка\#metalamp\webside-toxin\src\index.html' in 'D:\#Frontend\Верстка\#metalamp\webside-toxin\srс'
  ModuleNotFoundError: Module not found: Error: Can't resolve 'D:\#Frontend\Верстка\#metalamp\webside-toxin\src\index.html' in 'D:\#Frontend\Верстка\#metalamp\webside-toxin\srс'
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\Compilation.js:1771:28
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\NormalModuleFactory.js:742:13
      at eval (eval at create (D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\NormalModuleFactory.js:276:22
      at eval (eval at create (D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\NormalModuleFactory.js:405:22
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\NormalModuleFactory.js:119:11
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\NormalModuleFactory.js:650:24
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\NormalModuleFactory.js:813:8
      at D:\#Frontend\Верстка\#metalamp\webside-toxin\node_modules\webpack\lib\NormalModuleFactory.js:933:5
  
  - Compilation.js:1771 
    [webside-toxin]/[webpack]/lib/Compilation.js:1771:28
  
  - NormalModuleFactory.js:742 
    [webside-toxin]/[webpack]/lib/NormalModuleFactory.js:742:13
  
  
  - NormalModuleFactory.js:276 
    [webside-toxin]/[webpack]/lib/NormalModuleFactory.js:276:22
  
  
  - NormalModuleFactory.js:405 
    [webside-toxin]/[webpack]/lib/NormalModuleFactory.js:405:22
  
  - NormalModuleFactory.js:119 
    [webside-toxin]/[webpack]/lib/NormalModuleFactory.js:119:11
  
  - NormalModuleFactory.js:650 
    [webside-toxin]/[webpack]/lib/NormalModuleFactory.js:650:24
  
  - NormalModuleFactory.js:813 
    [webside-toxin]/[webpack]/lib/NormalModuleFactory.js:813:8
  
  - NormalModuleFactory.js:933 
    [webside-toxin]/[webpack]/lib/NormalModuleFactory.js:933:5
  
  - child-compiler.js:169 
    [webside-toxin]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:548 
    [webside-toxin]/[webpack]/lib/Compiler.js:548:11
  
  - Compiler.js:1118 
    [webside-toxin]/[webpack]/lib/Compiler.js:1118:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [webside-toxin]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1114 
    [webside-toxin]/[webpack]/lib/Compiler.js:1114:33
  
  - Compilation.js:2252 finalCallback
    [webside-toxin]/[webpack]/lib/Compilation.js:2252:11
  
  - Compilation.js:2543 
    [webside-toxin]/[webpack]/lib/Compilation.js:2543:11
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [webside-toxin]/[tapable]/lib/Hook.js:18:14
  
</pre>
</code>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

T

TheOnlyFastCoder2, 2021-07-18
@karmyskove

I can send you a complete webpack setup so that you don't suffer for a long time and can quickly start your application development
/**** package.json ****/
The devDependencies property contains a list of installed packages.
npm i -D yourPack

{
  "name": "yourProject",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack serve --mode production",
    "watch": "webpack serve --mode development --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.5",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "node-sass": "^6.0.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.7",
    "vue-loader-plugin": "^1.3.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

/**** webpack.config.js ****/

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

module.exports = {
    mode:'development',
    devtool: false,
    performance: {
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    entry: ["./src/index.js","./src/assets/js/main.js"],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),

    },
    plugins: [
        new HTMLWebpackPlugin({template: "./src/index.html"}),
        new VueLoaderPlugin(),
    ],
    resolve: {
        extensions:['.js','.scss','.vue', '.svg', '.png', '.jpg','...'],
        alias: {
            vue: 'vue/dist/vue.js'
        },
    },
    module: {
        rules: [
            {
                test:/\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.scss$/,
                use: ['vue-style-loader','style-loader','css-loader','sass-loader'],
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [{
                    loader:'url-loader',
                    options: {
                        name: '[name].[ext]',
                        outPath: './src/assets/imgs',
                        publicPath: './src/assets/imgs',
                        emitFile: true,
                        esModule: false,
                    }
                }]
            },
            {
                test: /\.(ttf|woff|woff2|eot)/,
                use: ['file-loader'],
            },
        ]
    }
}