When building my final bundle with production mode in webpack, I noticed that the exported multiple entry compiled js files always include loaders content. How can I eliminate them and what is the reason for their inclusion?
To replicate this issue, follow these steps:
git clone https://github.com/adamchenwei/boilerplate-webpack-babel-sass-storybook-vuejs.git
git checkout step/3-prod-webpack-build-setup-basic
npm install
npm run build:prod
https://i.sstatic.net/2z0Ft.png
I would appreciate any insights or ideas on how to address this. I have already explored https://webpack.js.org/plugins/module-concatenation-plugin/ without success. It seems that there is no solution available on Stack Overflow either.
Thank you!
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/library.js',
HelloComp: './src/components/HelloComponent/HelloComponent.vue',
Bye: './src/components/ByeComponent/ByeComponent.vue'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
externals: {
'vue': {
root: 'vue',
commonjs2: 'vue',
commonjs: 'vue',
amd: 'vue',
umd: 'vue'
},
// other external dependencies...
}
}
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// other imports...
// configuration for BundleAnalyzerPlugin
module.exports = merge(common, {
mode: 'production',
module: {
rules: [
// various rules for handling different file types
]
},
plugins: [
// various plugins including VueLoaderPlugin, HtmlWebpackPlugin, CopyWebpackPlugin, etc.
]
});