This is the third day of my participation in Gwen Challenge
Look directly at the code webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack').container
.ModuleFederationPlugin;
const { VueLoaderPlugin } = require('vue-loader');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const fs = require('fs');
const emoji = require('node-emoji');
const chalk = require('chalk');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { merge } = require('webpack-merge');
{
entry: './src/index.js'.mode: 'development'.devtool: 'cheap-module-source-map'.resolve: {
modules: ['node_modules'].extensions: ['.js'.'.jsx'.'.vue'.'.ts'.'tsx'].alias: {
vue$: 'vue/dist/vue.esm-browser.js'.axios$: 'axios/dist/axios.js'.moment$: 'moment/dist/moment.js'.'ant-design-vue$': 'ant-design-vue/es/index.js'.'vue-router$': 'vue-router/dist/vue-router.cjs.js'.'@ant-design/icons-vue$': '@ant-design/icons-vue/lib'.The '@': './src',}},output: {
publicPath: '//localhost:8080/asst/'.path: './dist'.filename: '/js/[name].[hash].js',},module: {
noParse: /^(vue|vue-router|vuex|lodash|echarts)$/.// Ignore module compilation
rules: [
{
test: /\.js|jsx? $/,
loader: 'babel-loader'.exclude: /node_modules/,
include: [
helper.resolve('src'),
helper.resolve('node_modules/webpack-dev-server/client')]}, {test: /\.vue$/,
loader: 'vue-loader'}, {test: /\.s[ac]ss$/i,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader'.'sass-loader',]}, {test: /\.css$/.// Handle CSS files, as well as.vue files
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader'.'postcss-loader',]}, {test: /\.(png|jpe? g|gif|svg|ico)(\? . *)? $/,
loader: 'file-loader'.options: {
esModule: false.limit: 100.name: bgCustomConfig.name + '/assets/' + '[name].[hash:7].[ext]',}}, {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\? . *)? $/,
loader: 'url-loader'.options: {
limit: 10000.name: bgCustomConfig.name + '/assets/' + '[name].[hash:7].[ext]',}}, {test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/,
loader: 'url-loader'.options: {
limit: 10000.name: bgCustomConfig.name + '/assets/' + '[name].[hash:7].[ext]',},},],},plugins: [
// Module federated configuration, this is only the configuration of the current project, if you need to access other projects, such as test, need to configure similar configuration
new ModuleFederationPlugin({
name: 'asst'.shared: { vue: { singleton: true}},filename: 'remoteEntry.js'.exposes: {
'./util': './src/util'
},
remote: {
test: 'test@//localhost:3001/remoteEntry.js'}}),new CleanWebpackPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './index.html',}).new CompressionPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'.chunkFilename: '/css/[id].[contenthash].css',}).new webpack.ProgressPlugin({
activeModules: false.entries: true.handler(percentage, message, ... args) {
console.info(parseInt(percentage * 100) + The '%', message, ... args); },modules: true.modulesCount: 5000.profile: false.dependencies: true.dependenciesCount: 10000.percentBy: null,}).new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
productionSourceMap: false,}}),new webpack.HotModuleReplacementPlugin()
],
performance: {
hints: 'warning'.// The maximum volume of the entry point
maxEntrypointSize: 10000000.// The maximum size of the generated file
maxAssetSize: 30000000.// maxAssetSize: 1024 * 1024 * 3,
// Give only performance hints for js files
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js'); }},optimization: {
minimize: true.minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin(),
// new ESBuildPlugin(),].splitChunks: {
chunks: 'all'.minSize: 30000.maxSize: 3000000.minChunks: Infinity.maxAsyncRequests: 5.maxInitialRequests: 3.cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10.reuseExistingChunk: true,},styles: {
name: 'styles'.test: /\.css$/,
chunks: 'all'.enforce: true,},default: {
minChunks: 2.priority: -20.reuseExistingChunk: true,},},},},}Copy the codepackage.json
{
"name": "test"."version": "1.0.0"."author": "test"."scripts": {
"dev": "node .. /bin/index.js -d test"."build": "webpack --mode production"."serve": "serve dist -p 3002"."clean": "rm -rf dist"
},
"dependencies": {
"@babel/core": "7.11.4"."@vue/compiler-sfc": "^ 3.0.4"."autoprefixer": "^ 9.8.6"."babel-loader": "8.1.0"."chalk": "^ 4.1.0." "."clean-webpack-plugin": "^ 3.0.0"."compression-webpack-plugin": "^ 7.1.2." "."copy-webpack-plugin": "^ 7.0.0." "."css-minimizer-webpack-plugin": "^ 1.2.0"."download-git-repo": "^ 3.0.2." "."esbuild-webpack-plugin": "^ 1.1.0." "."execa": "^ 5.0.0"."extract-css-chunks-webpack-plugin": "^ 4.9.0"."extract-text-webpack-plugin": "^ 4.0.0 - beta."."fs-extra": "^ 9.1.0"."html-webpack-plugin": "^ 4.5.1." "."inquirer": "^ 7.3.3." "."koa": "Tokens ^ 2.13.1"."koa-router": "^ 10.0.0"."koa-static": "^ 5.0.0"."koa-views": "^ 7.0.0." "."mini-css-extract-plugin": "^" 1.3.4."node-emoji": "^ 1.10.0"."open": "^ 7.3.1"."ora": "^ 5.0.0"."portfinder": "^ 1.0.28"."postcss-import": "^ 12.0.1"."postcss-loader": "^ 3.0.0"."postcss-url": "^ 8.0.0." "."react": "^ 16.13.0"."react-dom": "^ 16.13.0"."serve": 11.3.2 ""."terser-webpack-plugin": "^ 5.1.1." "."underscore": "^ 1.12.0"."uuid": "^ 8.3.2"."vue-loader": "^ 16.1.2." "."webpack": "^ 5.14.0"."webpack-api-mocker": "1.7.6"."webpack-bundle-analyzer": "^ 4.3.0"."webpack-cli": "3.3.12"."webpack-dev-server": "^ 3.11.0"."webpack-merge": "^ 5.7.3." "."zlib": "^ 1.0.5." "
},
"sideEffects": [
"*.vue"."*.scss"."*.css"."*.less"]}Copy the code.babelrc
{
"presets": [["@babel/preset-env",
{
"modules": false."targets": {
"browsers": ["1%" >."last 2 versions"."not ie <= 11"]}}]// "stage-2"]."plugins": [
"@vue/babel-plugin-transform-vue-jsx"."@babel/plugin-transform-runtime"."jsx-v-model"]}Copy the codeThe configuration of vue3 is similar to that of VUe2, except that the configuration of VUE3 is different from that of VUE2. There are many modules federateddemo, thank you ~ ~, reprint please indicate the original!!