js файлы подключаются только в index.html, а в других .html нет
Не могу понять почему не переносится папка js и не подключаются .js на других страницах.
На index.html есть папка js с файлами http://i.imgur.com/1DYUlhf.png и они подключаются. Все норм. А вот на других страницах ее нет http://i.imgur.com/9RJ48KD.png. Файлы *.pug находятся в той же папке что и index.pug. (css подключается ко всем файлам) Кто-то может подсказать в чем может быть проблема?
Использую вот такой конфиг webpack.base.conf.js
/* Base config:
========================================================================== */
const path = require("path");
const webpack = require('webpack')
const fs = require("fs");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PATHS = {
src: path.join(__dirname, "../src"),
dist: path.join(__dirname, "../dist"),
assets: "assets/"
};
const PAGES_DIR = `${PATHS.src}/pug/pages/`;
const PAGES = fs
.readdirSync(PAGES_DIR)
.filter(fileName => fileName.endsWith(".pug"));
module.exports = {
externals: {
paths: PATHS
},
entry: {
app: PATHS.src
},
output: {
filename: `${PATHS.assets}js/[name].[contenthash].js`,
path: PATHS.dist,
publicPath: "/"
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: "vendors",
test: /node_modules/,
chunks: "all",
enforce: true
}
}
}
},
module: {
rules: [
{
// Pug
test: /\.pug$/,
loader: "pug-loader",
exclude: "/node_modules/"
},
{
// JavaScript
test: /\.js$/,
loader: "babel-loader",
exclude: "/node_modules/"
},
{
// Fonts
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
options: {
name: "[name].[ext]"
}
},
{
// images / icons
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]"
}
},
{
// less
test: /\.less$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: { sourceMap: true }
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
config: { path: `./postcss.config.js` }
}
},
{
loader: "less-loader",
options: { sourceMap: true }
}
]
},
{
// css
test: /\.css$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: { sourceMap: true }
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
config: { path: `./postcss.config.js` }
}
}
]
}
]
},
resolve: {
alias: {
"~": PATHS.src
}
},
plugins: [
new MiniCssExtractPlugin({
filename: `${PATHS.assets}css/[name].[contenthash].css`
}),
new CopyWebpackPlugin([
{ from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img` },
{ from: `${PATHS.src}/${PATHS.assets}fonts`, to: `${PATHS.assets}fonts` },
{ from: `${PATHS.src}/static`, to: "" }
]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
...PAGES.map(
page =>
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/${page}`,
filename: `./${page.replace(/\.pug/, ".html")}`
})
)
]
};