Skip to content

Instantly share code, notes, and snippets.

@joshrouwhorst
Last active Apr 13, 2021
Embed
What would you like to do?
Webpack Error
node --trace-deprecation node_modules/webpack/bin/webpack
(node:43540) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
at /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/node_modules/html-webpack-plugin/index.js:286:49
at processTicksAndRejections (internal/process/task_queues.js:93:5)
asset assets/Image.png 2.61 MiB [emitted] [from: src/assets/Image.png]
asset main.c74f277f0931dd2347b7.js 1.18 KiB [emitted] [immutable] (name: main)
asset index.html 954 bytes [emitted]
./src/app.js 1 bytes [built] [code generated]
ERROR in Error: /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:121
/******/ __webpack_require__.b = require("url").pathToFileURL(__filename);
^
ReferenceError: __filename is not defined
- template.html:121
/Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:121:65
- template.html:140
/Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:140:13
- template.html:150
/Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:150:12
- index.js:327 HtmlWebpackPlugin.evaluateCompilationResult
[Test]/[html-webpack-plugin]/index.js:327:28
- index.js:243
[Test]/[html-webpack-plugin]/index.js:243:22
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5
- async Promise.all
- async Promise.all
{
"name": "test-project",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"pack:serve": "webpack serve",
"pack:build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0-alpha.0",
"concurrently": "^6.0.0",
"css-loader": "^5.2.1",
"extract-loader": "^5.1.0",
"fibers": "^5.0.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^4.5.2",
"live-server": "^1.2.1",
"node-sass": "^5.0.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.31.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"bootstrap": "^5.0.0-beta3"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="assets/Image.png" />
</body>
</html>
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'assets',
assetModuleFilename: 'assets/[name][ext][query]'
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/template.html'
})
],
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader'
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{ // Beware the situation when node-sass and sass were installed! By default the sass-loader prefers sass. In order to avoid this situation you can use the implementation option.
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: require('sass'),
additionalData: "$env: " + process.env.NODE_ENV + ";",
}
}
]
},
{
test: /\.png$/,
type: 'asset/resource'
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource'
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment