142 lines
3.4 KiB
JavaScript
142 lines
3.4 KiB
JavaScript
/*eslint-disable*/
|
||
const { join } = require('path');
|
||
const path = require('path');
|
||
const { readdirSync, statSync } = require('fs');
|
||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||
const CopyPlugin = require('copy-webpack-plugin');
|
||
const TerserPlugin = require("terser-webpack-plugin");
|
||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||
const isDev = process.env.RUNNING_ENV === 'dev';
|
||
const isProd = process.env.RUNNING_ENV === 'prod';
|
||
/**
|
||
* 引入 src/view/pages下的页面文件，排除 _ 开头的文件夹
|
||
*/
|
||
const importEntry = () => {
|
||
const entries = {};
|
||
const rootDir = join(process.cwd(), '/view/page');
|
||
readdirSync(rootDir)
|
||
.filter(i => !i.startsWith('_'))
|
||
.forEach(file => {
|
||
if (statSync(join(rootDir, file)).isDirectory())
|
||
entries[file] = `/view/page/${file}/index.ts`;
|
||
});
|
||
return entries;
|
||
};
|
||
|
||
module.exports = {
|
||
entry: {
|
||
...importEntry(),
|
||
},
|
||
output: {
|
||
path: path.resolve(__dirname, 'public/'),
|
||
publicPath: '',
|
||
filename: '[name].js',
|
||
chunkFilename: '[id].chunk.js?[hash:8]',
|
||
clean: true
|
||
},
|
||
mode: isDev ? 'development' : 'production',
|
||
optimization: {
|
||
minimize: true,
|
||
minimizer: [new TerserPlugin({
|
||
terserOptions: {
|
||
compress: true,
|
||
},
|
||
})],
|
||
splitChunks: {
|
||
chunks: 'all',
|
||
cacheGroups: {
|
||
vendor: {
|
||
name: 'vendors',
|
||
test: /[\\/]node_modules[\\/]/,
|
||
priority: 10,
|
||
chunks: 'initial'
|
||
},
|
||
// lib: {
|
||
// test(module) {
|
||
// return (
|
||
// module.size() > 50 * 1024 &&
|
||
// /node_modules[/\\]/.test(module.nameForCondition() || '')
|
||
// )
|
||
// },
|
||
// name: 'chunk-lib',
|
||
// priority: 15,
|
||
// minChunks: 1,
|
||
// reuseExistingChunk: true,
|
||
// },
|
||
}
|
||
},
|
||
},
|
||
module: {
|
||
rules: [
|
||
{
|
||
test: /\.ts?$/,
|
||
use: 'ts-loader',
|
||
exclude: /node_modules/,
|
||
},
|
||
{
|
||
test: /\.css$/,
|
||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||
},
|
||
{
|
||
test: /\.less$/,
|
||
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
|
||
},
|
||
{
|
||
test: /\.(scss)$/,
|
||
use: [
|
||
MiniCssExtractPlugin.loader,
|
||
{
|
||
loader: 'css-loader'
|
||
},
|
||
{
|
||
loader: 'postcss-loader',
|
||
options: {
|
||
postcssOptions: {
|
||
plugins: () => [
|
||
require('autoprefixer')
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
loader: 'sass-loader'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
test: /\.(png|jpg|gif)$/i,
|
||
use: [
|
||
{
|
||
loader: 'url-loader',
|
||
options: {
|
||
limit: 8192,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
plugins: [
|
||
new MiniCssExtractPlugin({
|
||
filename: '[name].css',
|
||
chunkFilename: '[id].css?[hash:8]',
|
||
}),
|
||
new CopyPlugin([
|
||
{ from: join(process.cwd(), 'view/assets'), to: 'assets' },
|
||
]),
|
||
isProd && new BundleAnalyzerPlugin({
|
||
analyzerHost: "0.0.0.0",
|
||
analyzerPort: 8088
|
||
})
|
||
].filter(Boolean),
|
||
resolve: {
|
||
extensions: ['.ts', '.js', '.ejs'],
|
||
},
|
||
externals: {
|
||
// require("jquery") 是外部的，并且可用
|
||
// 在全局变量 jQuery 上
|
||
// jquery: 'jQuery',
|
||
// $: 'jQuery'
|
||
},
|
||
};
|