При сборке вебпак сам подставляет стили и js, которые получились.
Как это убрать?
Скорее всего виноват html-webpack-plugin. Но в интернете ничего не нашел по этому вопросу.
Код конфига:
const webpack = require('webpack')
const path = require('path')
const fs = require('fs')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//const { VueLoaderPlugin } = require('vue-loader')
// Main const
// see more: https://github.com/vedees/webpack-template/blob/master/README.md#main-const
const PATHS = {
src: path.join(__dirname, '../src'),
dist: path.join(__dirname, '../dist'),
assets: 'assets/'
}
// Pages const for HtmlWebpackPlugin
// see more: https://github.com/vedees/webpack-template/blob/master/README.md#html-dir-folder
// const PAGES_DIR = PATHS.src
const PAGES_DIR = `${PATHS.src}/pages`
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))
const PAGES_ENTRY = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.js'))
module.exports = {
externals: {
paths: PATHS
},
entry: {
kit: `${PATHS.src}/pages/ui-kit.js`
},
output: {
filename: `${PATHS.assets}js/[name].js`,
path: PATHS.dist,
publicPath: '/'
},
module: {
rules: [{
test: /\.pug$/,
oneOf: [
{
use: ['pug-loader']
}
]
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}, {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
outputPath: `${PATHS.assets}fonts`,
name: '[name].[ext]'
}
}, {
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
outputPath: `${PATHS.assets}img`,
name: '[name].[ext]'
}
}, {
test: /\.less$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
url: false
}
}, {
loader: 'postcss-loader',
options: { sourceMap: true, config: { path: `./postcss.config.js` } }
}, {
loader: 'less-loader',
options: { sourceMap: true }
}
]
}, {
test: /\.css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
url: false
}
}, {
loader: 'postcss-loader',
options: { sourceMap: true, config: { path: `./postcss.config.js` } }
}
]
}]
},
resolve: {
alias: {
'~': PATHS.src+"/pages",
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
'$': 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jquery': 'jquery',
'window.jQuery': 'jquery',
}),
new MiniCssExtractPlugin({
filename: `${PATHS.assets}css/[name].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: 'static' },
]),
// Automatic creation any html pages (Don't forget to RERUN dev server)
// see more: https://github.com/vedees/webpack-template/blob/master/README.md#create-another-html-files
// best way to create pages: https://github.com/vedees/webpack-template/blob/master/README.md#third-method-best
...PAGES.map(page => new HtmlWebpackPlugin({
template: `${PAGES_DIR}/${page}`,
filename: `./${page.replace(/\.pug/,'.html')}`
}))
],
}
Я просто сборку не сам настраивал изначально, просто немного изменил под себя.