const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const filetool = require('./src/utils/file.js')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const mode = 'production'
const dist_name = 'dist-prod'
const html_minify = {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
const HTMMLPlugin = []
const { localPathResult: AllHTMLLocalFile4xx } = filetool.getAllFilePaths(path.resolve(__dirname, 'src/html/error/4xx'))
AllHTMLLocalFile4xx.forEach((filePath) => {
if (!filePath.endsWith('.html')) {
return
}
if (filePath.includes('signal.html')) {
HTMMLPlugin.push(
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src/html/error/4xx', filePath), //指定模板文件
filename: path.join('error/4xx', filePath),
chunks: ['signal'],
publicPath: '../../'
})
)
return
}
if (filePath.includes('400.html')) {
HTMMLPlugin.push(
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src/html/error/4xx', filePath), //指定模板文件
filename: path.join('error/4xx', filePath),
chunks: ['common', 'err404'],
publicPath: '../../'
})
)
return
}
HTMMLPlugin.push(
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src/html/error/4xx', filePath), //指定模板文件
filename: path.join('error/4xx', filePath),
chunks: ['common', 'err4xx'],
publicPath: '../../'
})
)
})
const { localPathResult: AllHTMLLocalFile5xx } = filetool.getAllFilePaths(path.resolve(__dirname, 'src/html/error/5xx'))
AllHTMLLocalFile5xx.forEach((filePath) => {
if (!filePath.endsWith('.html')) {
return
}
if (filePath.includes('signal.html')) {
HTMMLPlugin.push(
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src/html/error/5xx', filePath), //指定模板文件
filename: path.join('error/5xx', filePath),
chunks: ['signal'],
publicPath: '../../'
})
)
return
}
HTMMLPlugin.push(
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src/html/error/5xx', filePath), //指定模板文件
filename: path.join('error/5xx', filePath),
chunks: ['common', 'err5xx'],
publicPath: '../../'
})
)
})
module.exports = {
mode: mode,
context: __dirname,
performance: {
hints: 'warning', // 或者 'error',取决于你希望如何处理超出限制的情况
maxAssetSize: 5000000, // 设置单个资源的最大尺寸,例如5MB
maxEntrypointSize: 10000000 // 设置入口起点的最大尺寸,例如10MB
},
entry: {
common: path.resolve(__dirname, 'src/common.js'),
index: path.resolve(__dirname, 'src/index.js'),
signal: path.resolve(__dirname, 'src/signal.js'),
new: path.resolve(__dirname, 'src/new.js'),
license: path.resolve(__dirname, 'src/license.js'),
mitorg: path.resolve(__dirname, 'src/mitorg.js'),
err4xx: path.resolve(__dirname, 'src/4xx.js'),
err404: path.resolve(__dirname, 'src/404.js'),
err5xx: path.resolve(__dirname, 'src/5xx.js')
},
output: {
path: path.resolve(__dirname, dist_name), //打包后的文件存放的地方
filename: 'js/[name].[fullhash].bundle.js', //打包后输出文件的文件名
chunkFilename: '[name].bundle.js',
clean: true,
charset: true,
publicPath: '/'
},
resolve: {
alias: {
'@': path.join(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.(css|scss|sass)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.(png|jpg|jpeg|svg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 8KB 以下的文件将被转换为 Data URL
fallback: 'file-loader',
outputPath: 'images', // 类似于 file-loader 的配置
name: '[name].[fullhash].[ext]'
}
}
]
},
{
test: /\.(mp4|m4v|avi|mov|qt|wmv|mkv|flv|webm|mpeg|mpg|3gp|3g2)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 8KB 以下的文件将被转换为 Data URL
fallback: 'file-loader',
outputPath: 'videos', // 类似于 file-loader 的配置
name: '[name].[fullhash].[ext]'
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 8KB 以下的文件将被转换为 Data URL
fallback: 'file-loader',
outputPath: 'fonts', // 类似于 file-loader 的配置
name: '[name].[fullhash].[ext]'
}
}
]
},
{
test: /\.html$/i,
loader: 'html-loader'
},
{
test: require.resolve('jquery'),
loader: 'expose-loader',
options: {
exposes: ['$', 'jQuery']
}
}
]
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'public', to: './' },
{ from: './config.json', to: './SH_CONFIG.json' },
{ from: './LICENSE', to: './' },
{ from: './LICENSE_CN', to: './' }
]
}),
...HTMMLPlugin,
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src', 'html', 'index.html'), //指定模板文件
filename: 'index.html',
chunks: ['common', 'index'],
minify: html_minify,
publicPath: './'
}),
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src', 'html', 'LICENSE_US.html'), //指定模板文件
filename: 'LICENSE_US.html',
chunks: ['common', 'license'],
minify: html_minify,
publicPath: './'
}),
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src/html/LICENSE_CN.html'), //指定模板文件
filename: 'LICENSE_CN.html',
chunks: ['common', 'license'],
minify: html_minify,
publicPath: './'
}),
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src', 'html', 'mitorg.html'), //指定模板文件
filename: 'mitorg.html',
chunks: ['common', 'mitorg'],
minify: html_minify,
publicPath: './'
}),
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src', 'html', 'index.new.signal.html'), //指定模板文件
filename: 'index.new.signal.html',
chunks: ['common', 'new', 'signal'], // 此signal要设置common
minify: html_minify,
publicPath: './'
}),
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src', 'html', 'index.new.html'), //指定模板文件
filename: 'index.new.html',
chunks: ['common', 'new'],
minify: html_minify,
publicPath: './'
}),
new HtmlWebpackPlugin({
inject: 'body',
template: path.resolve(__dirname, 'src/html/error/4xx/404.signal.html'), //指定模板文件
filename: '404.html',
chunks: ['common', 'signal'], // 此signal要设置common
minify: html_minify,
publicPath: './'
}),
new MiniCssExtractPlugin({
filename: 'style/[name].[hash].bundle.css',
chunkFilename: 'css/[id].bundle.css'
})
],
devServer: {
static: {
directory: path.join(__dirname, dist_name)
},
compress: true,
port: 1001,
open: true,
hot: true
}
}