webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//压缩css代码
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // webpack可视化
const resolve = dir => path.join(__dirname, dir)
console.log(__dirname, 'DIRNAME');
const isDev = process.env.NODE_ENV === 'development';
const webServerName = 'SimCmptWebServer';
const clientConfig = {
mode: process.env.NODE_ENV,
devtool: isDev ? 'inline-source-map' : '',
entry: {
main: './js/pages/main.js',
// vendor: ['vue', 'vue-router', 'vuex', 'axios'],
vant: ['vant'],
tools: ['dayjs', 'lodash', 'vconsole'],
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('images'),
'@js': resolve('js'),
}
},
output: {
path: isDev ? path.resolve(__dirname, `../${webServerName}/public/mnds/dev`) : path.resolve(__dirname, `../${webServerName}/public/mnds/dist`),
publicPath: isDev ? '/mnds/dev/' : '/mnds/dist/',
filename: isDev ? '[name].js' : '[name].[chunkhash:8].js',
chunkFilename: isDev ? '[name].js' : '[name].[chunkhash:8].js',
},
module: {
rules: [{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}]
}, {
test: /\.js$/,
exclude: /node_modules\\(?!@up)/,
loader: 'babel-loader?cacheDirectory',
options: {
presets: [
'@babel/preset-env',
// {
// targets: {
// edge: "17",
// firefox: "60",
// chrome: "67",
// safari: "11.1"
// },
// corejs: 2,//新版本需要指定核⼼库版本
// useBuiltIns: "usage"//按需注⼊
// }
],
configFile: path.resolve(__dirname, './.babelrc.js')
}
}, {
test: /\.(css)$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
isDev ? 'css-loader' : 'css-loader?localIdentName=[local]&minimize=true'
]
}, {
test: /\.scss$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
isDev ? 'css-loader' : 'css-loader?localIdentName=[local]&minimize=true',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, './css/variables.scss') // 引入全局 SasS 变量的文件（对应你全局文件的路径）
]
}
}
]
}, {
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader: 'file-loader',
options: {
limit: 300 * 1024,
name: './images/[name].[ext]'
}
}]
},
]
},
plugins: [
// new WebpackObfuscator ({
// rotateStringArray: true
// }, ['excluded_bundle_name.js']),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `"${process.env.NODE_ENV}"`
}
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
allChunks: true
}),
new HtmlWebpackPlugin({
title: '',
inject: 'body',
extra: {
content: '<%include indexContent.ejs%>',
},
filename: '../../../views/index.ejs',
chunks: ['manifest', 'main', 'vant', 'tools', 'chunk-commons'],
template: path.resolve(__dirname, './index.tpl'),
}),
],
externals: {},
optimization: {
runtimeChunk: {
name: 'manifest'
},
minimize: !isDev,
splitChunks: {
cacheGroups: {
// vendor: {
// name: 'vendor',
// test: /[\\/]node_modules[\\/](vue|vue-router|axios|vuex|setimmediate|process|timers-browserify)/,
// priority: 10,
// chunks: 'initial',
// },
vant: {
name: 'vant',
test: /[\\/]node_modules[\\/]_?vant(.*)/,
priority: 50,
chunks: 'initial',
},
// echarts: {
// name: 'echarts',
// test: /[\\/]node_modules[\\/]_?echarts(.*)/,
// priority: 50,
// chunks: 'initial'
// },
tools: {
name: 'tools',
test: /[\\/]node_modules[\\/](dayjs|lodash|vconsole)/,
priority: 50,
chunks: 'initial'
},
commons: {
name: 'chunk-commons',
minChunks: 2, //模块被引用2次以上的才抽离
priority: 5,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
};
// 发布特殊逻辑
if (!isDev) {
clientConfig.plugins.push(new CleanWebpackPlugin(
['dist', 'dev'], // 匹配删除的文件
{
root: path.resolve(__dirname, `../${webServerName}/public/mnds/`), // 根目录
verbose: false, // 开启在控制台输出信息
dry: false // 启用删除文件
}
));
clientConfig.plugins.push(new OptimizeCssAssetsWebpackPlugin()); // 压缩css
}
// 开发环境特殊逻辑
// if (isDev) {
// clientConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerPort: 8888, })); // 可视化webpack
// }
module.exports = clientConfig;
