element-plus/website/webpack.config.js
2021-09-14 23:22:59 +08:00

140 lines
3.6 KiB
JavaScript

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const isProd = process.env.NODE_ENV === 'production'
/*
* 是否使用生产环境的 vue
*/
const isVueProd = process.env.VUE_BUNDLE === 'production' || isProd
const vueBundle = isVueProd ? 'vue.esm-browser.prod.js' : 'vue.esm-browser.js'
const isPlay = !!process.env.PLAY_ENV
/** @type { import('webpack').Configuration } */
const config = {
mode: isProd ? 'production' : 'development',
devtool: !isProd && 'cheap-module-eval-source-map',
entry: isPlay
? path.resolve(__dirname, './play.js')
: path.resolve(__dirname, './entry.js'),
output: {
path: path.resolve(__dirname, '../website-dist'),
publicPath: '/',
filename: isProd ? '[name].[hash].js' : '[name].js',
},
module: {
rules: [
// {
// test: /\.mjs$/,
// include: /node_modules/,
// type: 'javascript/auto',
// },
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.md$/,
use: [
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false,
},
},
},
{
loader: path.resolve(__dirname, './md-loader/index.js'),
},
],
},
{
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
loader: 'url-loader',
// todo: 这种写法有待调整
query: {
limit: 10000,
name: path.posix.join('static', '[name].[hash:7].[ext]'),
},
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
alias: {
vue: `vue/dist/${vueBundle}`,
examples: path.resolve(__dirname),
},
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './website/index.tpl',
filename: './index.html',
favicon: './website/favicon.ico',
}),
// new BundleAnalyzerPlugin(),
new ProgressBarPlugin(),
],
devServer: {
inline: true,
// 如果使用 vue 的生产环境构建包,无法启用 hmr
// 因为生产环境下 vue 没有注入 hmr 必须的 __VUE_HMR_RUNTIME__ api
hot: !isVueProd,
stats: 'minimal',
publicPath: '/',
contentBase: __dirname,
overlay: true,
host: '0.0.0.0',
},
optimization: {
minimize: true,
minimizer: [new CssMinimizerPlugin()],
},
}
const cssRule = {
test: /\.(sass|scss|css)$/,
use: [
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
}
// if (isProd) {
config.plugins.push(
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
}),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: JSON.stringify(true),
__VUE_PROD_DEVTOOLS__: JSON.stringify(false),
})
)
cssRule.use.unshift(MiniCssExtractPlugin.loader)
// } else {
cssRule.use.unshift('style-loader')
// }
config.module.rules.push(cssRule)
module.exports = config