webpack打包vue组件与JS-SDK注意事项

首先复习下：

《webpack打包npm组件库，libraryTarget如何选择？》

《webpack打包发布npm包优化-vue/echarts等公共库抽离》

{
configureWebpack(_webpackConfig) {
  webpackConfig = _webpackConfig;
  webpackConfig.plugins.push(
    // new webpack.DefinePlugin(env),
    new webpack.ProvidePlugin({
      echarts: 'echarts',
      dayjs: 'dayjs',
    }),
  )
  if (!String(process.env?.version).includes('sdk')) {
    webpackConfig.plugins.push(
      new MonacoWebpackPlugin({
        // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
        languages: ['json', 'sql']
      }),
      new CopyPlugin({
        patterns: [
          { from: resolve(__dirname, 'static/'), to: resolve(__dirname, `./dist/${env.assetsDir}`) },
        ],
      }),
      new replaceStaticUrlPlugin(),
    )
  }
  if (['sdk-dashboard-vue', 'sdk-dashboard-app', 'sdk-dashboard-app'].includes(process.env?.version)) {
    if ('sdk-dashboard-vue' === process.env?.version) {
      webpackConfig.entry = {
        main: './src/dashboard-vue.ts',
      }
      webpackConfig.externals = {
        'axios':'axios',
        'dayjs':'dayjs',
        'vue':'vue',
        'bk-magic-vue':'bk-magic-vue',
        'vue-router':'vue-router',
      }

      webpackConfig.output = {
        // ..._webpackConfig?.output,
        path: resolve(__dirname, './dist'),
        filename: '[name].js',
        chunkFilename: '[name].js',
        publicPath: '',
        libraryTarget: 'umd',
        umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
        library: 'BkVisionSDK', // 库名，在全局环境下被挂载在window下
      }
    }
    if ('sdk-dashboard-app' === process.env?.version) {
      webpackConfig.entry = {
        main: './src/dashboard-app.ts',
      }
      // webpackConfig.externals = {
      //   'axios':'axios',
      //   'dayjs':'dayjs',
      // }
      webpackConfig.output = {
        // ..._webpackConfig?.output,
        path: resolve(__dirname, './dist'),
        filename: '[name].js',
        // chunkFilename: '[name].js',
        publicPath: '',
        libraryTarget: 'umd',
        // umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
        // library: 'BkVisionSDK', // 库名，在全局环境下被挂载在window下
      }
    }
    if ('sdk-dashboard-cdn' === process.env?.version) {
      webpackConfig.entry = {
        main: './src/dashboard-app.ts',
      }
      webpackConfig.output = {
        // ..._webpackConfig?.output,
        path: resolve(__dirname, './dist'),
        filename: '[name].js',
        chunkFilename: '[name].js',
        publicPath: '',
        libraryTarget: 'window',
        umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
        library: 'BkVisionSDK', // 库名，在全局环境下被挂载在window下
      }
    }
  }
  webpackConfig.resolve = {
    ...webpackConfig.resolve,
    symlinks: false,
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    alias: {
      ...webpackConfig.resolve?.alias,
      // extensions: ['.js', '.jsx', '.ts', '.tsx'],
      '@': resolve(__dirname, './src'),
      '@static': resolve(__dirname, './static'),
      '@charts': resolve(__dirname, './src/plugins/charts'),
      '@datasource': resolve(__dirname, './src/plugins/datasource'),
      '@modules': resolve(__dirname, './src/store/modules'),
    },
  };
  webpackConfig.watchOptions = {
    ...webpackConfig?.watchOptions,
    ignored: /plugins/,
  };
},

}

这是一个范例，需要注意实现还是蛮多。

比如分包，

optimization.runtimeChunk

如果我们 加了这个，就会打包出runtime，实际我们打包sdk，最好不这个去掉

exports.default = (function (isProd, config) {
    if (!isProd) {
        return {
            runtimeChunk: true,
            removeAvailableModules: false,
            removeEmptyChunks: false,
            splitChunks: false,
        };
    }
    var optimization = {
        minimize: isProd,
        // runtimeChunk: 'single',
        moduleIds: 'deterministic',
        minimizer: [
            new css_minimizer_webpack_plugin_1.default({
                parallel: true,
            }),
            new terser_webpack_plugin_1.default({
                exclude: /\.min\.js$/,
                parallel: true,
                terserOptions: {
                    compress: {
                        // drop_debugger: true,
                        drop_console: config.dropConsole,
                        pure_funcs: ['console.log', 'console.info'], // 删除console.log
                    },
                },
            }),
        ],
    };
    if (config.needSplitChunks) {
        Object.assign(optimization, {
            splitChunks: {
                chunks: 'all',
                minChunks: 1,
                cacheGroups: {
                    bkMagic: {
                        enforce: true,
                        chunks: 'initial',
                        name: 'chunk-bk-magic',
                        priority: 20,
                        reuseExistingChunk: true,
                        test: /\/bk-magic/,
                    },
                    vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'initial',
                        priority: -10,
                        reuseExistingChunk: true,
                        enforce: false,
                    },
                    default: {
                        priority: -20,
                        chunks: 'initial',
                        test: /.*[jt]sx?$/,
                        reuseExistingChunk: true,
                        enforce: false,
                    },
                },
            },
        });
    }
    return optimization;
})

如果是打包js-cdn资源给别人引用，去掉分包，是8m，10m都不管它，直接丢一个资源文件就好。

转载本站文章《webpack打包vue组件与JS-SDK注意事项》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2022_0809_8874.html