I have this structure:
https://i.sstatic.net/oj2KH.png\
And this webpack configs:
base:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const PATHS = {
src: path.join(__dirname, '../src'),
dist: path.join(__dirname, '../dist'),
assets: 'assets/'
}
const PostcssLoaderConfig = {
loader: 'postcss-loader',
options: { sourceMap: true, postcssOptions: { config: `${PATHS.src}/assets/js/configs/postcss.config.js` } }
}
module.exports = {
externals: {
paths: PATHS,
plugins: {
miniCssExtract: MiniCssExtractPlugin
},
configs: {
postCssLoader: PostcssLoaderConfig,
}
},
entry: {
app: PATHS.src
},
output: {
path: PATHS.dist,
filename: `${PATHS.assets}js/[name].js`,
publicPath: '/'
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendors',
test: /node_modules/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: `${PATHS.assets}css/[name].css`
}),
new HtmlWebpackPlugin({
hash: false,
template: `${PATHS.src}/index.html`,
filename: './index.html'
}),
new CopyWebpackPlugin({
patterns: [
{ from: `${PATHS.src}/assets/img/`, to: `${PATHS.assets}img` },
{ from: `${PATHS.src}/assets/fonts/`, to: `${PATHS.assets}fonts` },
{ from: `${PATHS.src}/static/`, to: `` }
]
})
],
module: {
rules: [
{
test: /\.js$/,
use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }
},
{
test: /\.((c|sa|sc)ss)$/i,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { sourceMap: true } },
PostcssLoaderConfig, { loader: 'sass-loader', options: { sourceMap: true } } ]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loader: {
scss: 'vue-style-loader!css-loader!sass-loader'
}
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
};
dev:
const webpack = require('webpack');
const webpackServer = require('webpack-dev-server');
const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
devtool: 'eval-cheap-module-source-map',
devServer: {
contentBase: baseWebpackConfig.externals.paths.dist,
port: 8081,
overlay: true
},
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map'
})
]
})
module.exports = new Promise((resolve, reject) => {
resolve(devWebpackConfig)
})
build:
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const buildWebpackConfig = merge(baseWebpackConfig, {
mode: 'production',
plugins: []
})
module.exports = new Promise((resolve, reject) => {
resolve(buildWebpackConfig)
})
I have no issues with dev config, it works fine, but build version looks like:
https://i.sstatic.net/lxYbr.png
HTML:
https://i.sstatic.net/IkFXd.png
Console:
https://i.sstatic.net/sICyX.png
Also, I noticed that some files used in SCSS are in the dist root, although they are not needed there (since the assets folder copied)
What can I do to make the build work properly?
Config was created for Webpack 4, but Webpack 5 was installed.