ant-design-vue/antd-tools/getWebpackConfig.js
2020-10-27 23:00:15 +08:00

266 lines
6.4 KiB
JavaScript

const { getProjectPath, resolve, injectRequire } = require('./utils/projectHelper');
injectRequire();
const path = require('path');
const webpack = require('webpack');
const WebpackBar = require('webpackbar');
const webpackMerge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const postcssConfig = require('./postcssConfig');
const CleanUpStatsPlugin = require('./utils/CleanUpStatsPlugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const distFileBaseName = 'antd';
const svgRegex = /\.svg(\?v=\d+\.\d+\.\d+)?$/;
const svgOptions = {
limit: 10000,
minetype: 'image/svg+xml',
};
const imageOptions = {
limit: 10000,
};
function getWebpackConfig(modules) {
const pkg = require(getProjectPath('package.json'));
const babelConfig = require('./getBabelCommonConfig')(modules || false);
const pluginImportOptions = {
style: true,
libraryName: distFileBaseName,
libraryDirectory: 'components',
};
babelConfig.plugins.push([resolve('babel-plugin-import'), pluginImportOptions]);
if (modules === false) {
babelConfig.plugins.push(require.resolve('./replaceLib'));
}
const config = {
devtool: 'source-map',
output: {
path: getProjectPath('./dist/'),
filename: '[name].js',
},
resolve: {
modules: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: [
'.web.tsx',
'.web.ts',
'.web.jsx',
'.web.js',
'.ts',
'.tsx',
'.js',
'.jsx',
'.vue',
'.md',
'.json',
],
alias: {
'@': process.cwd(),
},
},
node: [
'child_process',
'cluster',
'dgram',
'dns',
'fs',
'module',
'net',
'readline',
'repl',
'tls',
].reduce((acc, name) => Object.assign({}, acc, { [name]: 'empty' }), {}),
module: {
noParse: [/moment.js/],
rules: [
{
test: /\.vue$/,
exclude: /node_modules/,
use: [
{
loader: 'vue-loader',
options: {
loaders: {
js: [
{
loader: 'babel-loader',
options: {
presets: [resolve('@babel/preset-env')],
plugins: [
[resolve('@vue/babel-plugin-jsx'), { mergeProps: false }],
resolve('@babel/plugin-proposal-object-rest-spread'),
],
},
},
],
},
},
},
],
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: babelConfig,
},
{
test: /\.tsx?$/,
use: [
{
loader: 'babel-loader',
options: babelConfig,
},
{
loader: 'ts-loader',
},
],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: Object.assign({}, postcssConfig, { sourceMap: true }),
},
],
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: Object.assign({}, postcssConfig, { sourceMap: true }),
},
{
loader: 'less-loader',
options: {
lessOptions: {
sourceMap: true,
javascriptEnabled: true,
},
},
},
],
},
// Images
{
test: svgRegex,
loader: 'url-loader',
options: svgOptions,
},
{
test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,
loader: 'url-loader',
options: imageOptions,
},
],
},
plugins: [
// new BundleAnalyzerPlugin(),
new CaseSensitivePathsPlugin(),
new webpack.BannerPlugin(`
${pkg.name} v${pkg.version}
Copyright 2017-present, ant-design-vue.
All rights reserved.
`),
new WebpackBar({
name: '🚚 Ant Design Vue Tools',
color: '#2f54eb',
}),
new CleanUpStatsPlugin(),
],
};
if (process.env.RUN_ENV === 'PRODUCTION') {
const entry = ['./index'];
config.externals = {
vue: {
root: 'Vue',
commonjs2: 'vue',
commonjs: 'vue',
amd: 'vue',
},
};
config.output.library = distFileBaseName;
config.output.libraryTarget = 'umd';
config.optimization = {
minimizer: [
new TerserPlugin({
sourceMap: true,
}),
],
};
// Development
const uncompressedConfig = webpackMerge({}, config, {
entry: {
[distFileBaseName]: entry,
},
mode: 'development',
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
});
// Production
const prodConfig = webpackMerge({}, config, {
entry: {
[`${distFileBaseName}.min`]: entry,
},
mode: 'production',
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})],
},
});
return [prodConfig, uncompressedConfig];
}
return config;
}
getWebpackConfig.webpack = webpack;
getWebpackConfig.svgRegex = svgRegex;
getWebpackConfig.svgOptions = svgOptions;
getWebpackConfig.imageOptions = imageOptions;
module.exports = getWebpackConfig;