webpack5+vue2

因为前端项目都是基于ViewUI（https://github.com/view-design/ViewUI）,所以直接使用了ViewUI的项目。今天折腾了差不多一下午，升级了所有package，基于最新的node 15，webpack 5等等。

{
  "scripts": {
    "dist:dev": "webpack --config build/webpack.dist.dev.config.js",
    "dist:prod": "webpack --config build/webpack.dist.prod.config.js",
  },
  "dependencies": {
    "countup.js": "^1.9.3",
    "dayjs": "^1.10.3",
    "deepmerge": "^2.2.1",
    "echarts": "^4.9.0",
    "element-resize-detector": "^1.2.1",
    "lodash.chunk": "^4.2.0",
    "lodash.throttle": "^4.1.1",
    "numeral": "^2.0.6",
    "select": "^1.1.2",
    "v-click-outside-x": "^3.7.1",
    "view-design": "^4.4.0"
  },
  "peerDependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "compression-webpack-plugin": "^7.1.2",
    "copy-webpack-plugin": "^7.0.0",
    "core-js": "^2.6.12",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^4.5.1",
    "less": "^4.1.0",
    "less-loader": "^7.2.1",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "transform-class-properties": "^1.0.0-beta",
    "url-loader": "^4.1.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "vue2-org-tree": "^1.3.4",
    "webpack": "^5.13.0",
    "webpack-cli": "^4.3.1",
    "webpack-merge": "^4.2.2"
  },
  "engines": {
    "node": ">=8.9.1",
    "npm": ">=5.5.1",
    "yarn": ">=1.3.2"
  },
  "browserslist": [
    "last 3 Chrome versions",
    "last 3 Firefox versions",
    "Safari >= 10",
    "Explorer >= 11",
    "Edge >= 12",
    "iOS >= 10",
    "Android >= 6"
  ]
}

/**
 * 公共配置
 */
const path = require('path');
const webpack = require('webpack');
const pkg = require('../package.json');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

function resolve(dir) {
    return path.join(__dirname, '..', dir);
}

module.exports = {
    // 加载器
    module: {
        // https://doc.webpack-china.org/guides/migrating/#module-loaders-module-rules
        rules: [{   // 添加解析 .vue文件loader
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {        // 添加解析 .css文件loader
            test: /\.css(\?.*)?$/,
            use: [  // loader 顺序不能乱
                'vue-style-loader',
                'style-loader',
                'css-loader'
            ]
        }, {
            test: /\.less$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'less-loader'
            ]
        },
        { // 配置sass语法支持，并且使用的是缩进格式
            test: /\.s[ac]ss$/,
            use: [
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            indentedSyntax: true // 如需使用花括号嵌套模式则设置为false
                        }
                    }
                }
            ]
        }, { // 配置Babel将ES6+ 转换为ES5
            test: /\.js(\?.*)?$/,
            exclude: file => ( // 排除node_modules文件夹
                /node_modules/.test(file) &&
                !/\.vue\.js/.test(file)
            ),
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-transform-runtime']
                }
            }
        }, { // 配置图片文件加载
            test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    esModule: false
                }
            }
        }, { // 配置字体文件加载
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: {
                loader: 'file-loader',
                options: {
                    esModule: false,
                    limit: 10000
                }
            }
        }, { // 处理node文件
            test: /\.node$/,
            loader: 'node-loader'
        }]

    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.DefinePlugin({
            'process.env.VERSION': `'${pkg.version}'`
        }),
    ]
};

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const glob = require("glob");
const { truncate } = require('fs');

const VER = "20210113c";

const getEntries = (globPath, flag) => {
    const files = glob.sync(globPath);

    let entries = {},
        entry, dirname, basename, pathname, extname;

    files.forEach(item => {
        entry = item;
        dirname = path.dirname(entry);//当前目录
        extname = path.extname(entry);//后缀
        basename = path.basename(entry, extname);//文件名
        pathname = path.join(dirname, basename);//文件路径
        if (extname === '.html') {
            entries[pathname] = './' + entry;
        } else if (extname === '.js') {
            entries[basename] = entry;
        }
    });

    return entries;
}

const entries = getEntries('./src/*.js');

process.env.NODE_ENV = 'production';

module.exports = merge(webpackBaseConfig, {
    entry: entries,
    output: {
        path: path.resolve(__dirname, '../dist/' + VER),
        publicPath: '/dist/',
        filename: '[name].js',
        library: 'iViewPro',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    externals: {
        vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
        },
    },
    plugins: [
        new CleanWebpackPlugin(),
        // @todo
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new TerserPlugin({
            parallel: true,
        })
    ]
});