Answer the question
In order to leave comments, you need to log in
How to install an additional entry point and be able to create a multi-page site with many html css and js files?
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, '../src/script.js'),
output:
{
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: ''
},
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, '../static') }
]
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
minify: true
}),
new MiniCSSExtractPlugin()
],
module:
{
rules:
[
// HTML
{
test: /\.(html)$/,
use: ['html-loader']
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
},
// CSS
{
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/images/'
}
}
]
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/fonts/'
}
}
]
},
// Shaders
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: [
'raw-loader'
]
}
]
}
}
const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const ip = require('internal-ip')
const portFinderSync = require('portfinder-sync')
const infoColor = (_message) =>
{
return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
}
module.exports = merge(
commonConfiguration,
{
mode: 'development',
devServer:
{
host: '0.0.0.0',
port: portFinderSync.getPort(8080),
contentBase: './dist',
watchContentBase: true,
open: true,
https: false,
useLocalIp: true,
disableHostCheck: true,
overlay: true,
noInfo: true,
after: function(app, server, compiler)
{
const port = server.options.port
const https = server.options.https ? 's' : ''
const localIp = ip.v4.sync()
const domain1 = `http${https}://${localIp}:${port}`
const domain2 = `http${https}://localhost:${port}`
console.log(`Project running at:\n - ${infoColor(domain1)}\n - ${infoColor(domain2)}`)
}
}
}
)
{
"scripts": {
"build": "webpack --config ./bundler/webpack.prod.js",
"dev": "webpack serve --config ./bundler/webpack.dev.js"
},
"dependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"animejs": "^3.2.1",
"babel-loader": "^8.2.2",
"cannon": "^0.6.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.1",
"dat.gui": "^0.7.7",
"file-loader": "^6.2.0",
"hover-effect": "^1.1.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0-alpha.7",
"mini-css-extract-plugin": "^1.3.4",
"portfinder-sync": "0.0.2",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"three": "^0.124.0",
"vanilla-tilt": "^1.7.0",
"webpack": "^5.14.0",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question