Answer the question
In order to leave comments, you need to log in
Why in webpack, when connecting two html pages, js and css are not connected to the second?
The script with styles is included in index.html, but not in calc.html. At connection manually styles too are not visible. I worked with gulp before, this is my first webpack project, so I can't find the problem
My build
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
target: 'web',
// context: path.resolve(__dirname, 'src'),
entry: {
main: [
'core-js/stable',
'regenerator-runtime/runtime',
'./src/index.js'
],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '',
clean: true
},
resolve: {
extensions: ['.js'],
alias: {
images: path.resolve(__dirname, 'src/accets/images/'),
},
},
devtool: 'source-map',
devServer: {
port: 3000,
open: true,
contentBase: path.join(__dirname, 'src'),
watchContentBase: true
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'src/index.html'),
}),
new HtmlWebpackPlugin({
filename: 'calc.html',
template: path.resolve(__dirname, 'src/pages/calc.html'),
}),
new MiniCssExtractPlugin({
filename: '[name].bundle.css',
}),
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/accets/images'),
to: path.resolve(__dirname, 'dist')
},
],
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
],
}
}
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