mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
140 lines
3.6 KiB
JavaScript
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
|