Quellcode durchsuchen

增加打包成lib

杨志杰 vor 3 Jahren
Ursprung
Commit
e432ac159e
5 geänderte Dateien mit 144 neuen und 3 gelöschten Zeilen
  1. 6 0
      bat/build-lib.bat
  2. 2 1
      package.json
  3. 0 0
      src/index.js
  4. 134 0
      webpack.lib.js
  5. 2 2
      webpack.prod.js

+ 6 - 0
bat/build-lib.bat

@@ -0,0 +1,6 @@
+set current_path="%~dp0"
+cd %current_path%
+cd ..
+rmdir /s/q dist
+npm run build-lib
+pause

+ 2 - 1
package.json

@@ -5,7 +5,8 @@
   "author": "yangzhijie <yangzhijie1488@163.com>",
   "scripts": {
     "dev": "webpack serve --config ./webpack.dev.js",
-    "build": "cross-env NODE_ENV=production webpack --mode=production --config ./webpack.prod.js --progress"
+    "build": "cross-env NODE_ENV=production webpack --mode=production --config ./webpack.prod.js --progress",
+    "build-lib": "cross-env NODE_ENV=production webpack --progress --config ./webpack.lib.js"
   },
   "files": [
     "package.json",

+ 0 - 0
src/index.js


+ 134 - 0
webpack.lib.js

@@ -0,0 +1,134 @@
+var path = require('path');
+var webpack = require('webpack');
+const WebpackMerge = require('webpack-merge');
+const baseConfig = require('./webpack.base.js');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = WebpackMerge.merge(baseConfig,{
+  mode: 'production',
+  
+  // 发布组件
+  entry: './src/index.js',
+
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'client-trace-v3.js',
+    // library: {
+    //   type: 'module',
+    // },
+    library: 'client-trace-v3',
+    libraryTarget: 'umd',
+    //「devtool 中模块」的文件名模板(用于冲突)
+    umdNamedDefine: false,
+  },
+
+  // experiments: {
+  //   outputModule: true,
+  // },
+
+  
+  optimization: {
+    minimize: false,    // 压缩 bundle
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+          format: {
+            // 保留 webpackIgnore: true 的注解
+            comments: /(\s*webpackIgnore)/i,
+          },
+
+        },
+      }),
+    ],
+  },
+  
+  devtool: 'source-map',
+
+  plugins: (module.exports.plugins || []).concat([    
+    
+    // 清除dist文件夹
+    new CleanWebpackPlugin(),
+    
+    // CSS 提取
+    new MiniCssExtractPlugin({
+      filename: 'client-trace-v3.css',
+    }),
+
+    // 打包分析插件
+    // https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //下面是该插件的默认配置,一般无需修改
+    new BundleAnalyzerPlugin({
+      //  可以是`server`,`static`或`disabled`。
+      //  在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
+      //  在“静态”模式下,会生成带有报告的单个HTML文件。
+      //  在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
+      analyzerMode: 'server',
+      //  将在“服务器”模式下使用的主机启动HTTP服务器。
+      analyzerHost: '127.0.0.1',
+      //  将在“服务器”模式下使用的端口启动HTTP服务器。
+      analyzerPort: 8888, 
+      //  路径捆绑,将在`static`模式下生成的报告文件。
+      //  相对于捆绑输出目录。
+      reportFilename: 'report.html',
+      //  模块大小默认显示在报告中。
+      //  应该是`stat`,`parsed`或者`gzip`中的一个。
+      //  有关更多信息,请参见“定义”一节。
+      defaultSizes: 'parsed',
+      //  在默认浏览器中自动打开报告
+      openAnalyzer: true,
+      //  如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
+      generateStatsFile: false, 
+      //  如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
+      //  相对于捆绑输出目录。
+      statsFilename: 'stats.json',
+      //  stats.toJson()方法的选项。
+      //  例如,您可以使用`source:false`选项排除统计文件中模块的来源。
+      //  在这里查看更多选项:https:  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
+      statsOptions: null,
+      logLevel: 'info', // 日志级别。可以是'信息','警告','错误'或'沉默'。
+    }),
+
+    // new CopyPlugin({ 
+    //   patterns: [
+    //       {
+    //         noErrorOnMissing: false, // 默认false,不会对丢失的文件产生错误
+    //         force: false,   // 默认false,覆盖已经存在的文件
+    //         priority: 0,    // 允许指定复制具有相同目标名称的文件的优先级
+    //         from: path.resolve(__dirname, "src/assets/style"),  // 拷贝来源
+    //         to: path.resolve(__dirname, "dist/assets"), // 拷贝到的位置
+    //         toType: "dir",  // 目录dir、文件file或模板template
+    //       }
+    //     ],
+    //   options: {
+    //     concurrency: 100,   // 同时请求fs的数量限制
+    //   },
+    // }),
+
+  ]),
+
+  // 不把第三方库打包到bundle中
+  externals: {
+    "ant-design-vue": "ant-design-vue",
+    "moment": "moment",
+    "pc-component-v3": "pc-component-v3",
+    "v-tooltip": "v-tooltip",
+    "vue-select": "vue-select",
+
+    
+    'jquery': "jquery",
+    'bootstrap': 'bootstrap',
+    'BootstrapDialog': 'BootstrapDialog',
+    'vue': 'vue',
+    'vue-i18n': 'vue-i18n',
+    'vue-router': 'vue-router',
+    'vuex': 'vuex',
+
+  },
+});

+ 2 - 2
webpack.prod.js

@@ -24,8 +24,8 @@ module.exports =  WebpackMerge.merge(baseConfig, {
     publicPath: './',
     library: `${name}`,
     libraryTarget: 'umd', // 把微应用打包成 umd 库格式
-    filename: './asset-js-bundle/[name].[contenthash:8].js',
-    chunkFilename: './asset-js-chunk/[name].[contenthash:8].js',
+    filename: './client-trace-v3-bundle/[name].[contenthash:8].js',
+    chunkFilename: './client-trace-v3-chunk/[name].[contenthash:8].js',
   },