Здравствуйте, учусь собирать многостраничные проекты на webpack, появилась вот такая проблема,
При сборке webpack подключает 2 js файла, хотя по идее должен подключать один, вот как настроен конфиг
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
let config = {
// точка входа
entry:{index: './src/pages/index/main.js', login: './src/pages/login/main.js'},
// Точка выхода (и другие настройки еще не совсем разобрался)
output: {
path: path.resolve(__dirname, 'dist'),
filename: "js/[name].js",
publicPath: ""
},
// config web-dev-server
devServer: {
overlay: true
},
// Подключенные доп модули webpack
module: {
rules: [
//babel перегоняет новый код в старый для поддержки старыми браузерами
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
},
//Данный модуль позволяет импортировать css в js
// Последовательность подключения loader справа на лево
{
test: /\.(sa|sc|c)ss$/,
use:
[
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
fallback: "style-loader",
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.pug$/,
loader: 'pug-loader'
},
{
test: /\.(img|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: 'img/[path][name].[ext]',
},
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]'
}
}
]
},
//Алиасы
resolve: {
alias: {
'~' : '../../',
}
},
// Подключаемые плагины
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
new HtmlWebpackPlugin({
template: "./src/pages/index/index.pug",
filename: "index.html",
files: {
js: './src/pages/index/main.js',
chunks: {
entry: './src/pages/index/main.js',
js: './src/pages/index/main.js'
},
}
}),
new HtmlWebpackPlugin({
template: "./src/pages/login/login.pug",
filename: "login.html",
files: {
js: './src/pages/login/main.js',
chunks: {
entry: './src/pages/login/main.js',
js: './src/pages/login/main.js'
}
}
}),
]
};
module.exports = config;
Вот файловая система
Может я что то не правильно указал, если нужно вот json
{
"name": "enb",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --inline"
},
"author": "Kotaro Hiba",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
Сильно не ругайтесь, я с бандлерами вообще работаю первый раз, еще не до конца понимаю как они устроены
Простой
