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>{
"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"
}
}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'],
},
]
}
}