如何配置Webpack构建以从共享模块导入

问题描述

我有一个组件库，其中包含一个ContextProvider和多个组件。 ContextProvider从shared/someContext/context.js导入上下文。其他组件使用来自shared/someContext/useSomeContext的自定义钩子来获取上下文值。 Webpack用于捆绑，并且生成的输出在每个组件中具有上下文的多个副本。如何配置webpack以使共享文件夹作为模块，从该模块导入上下文并防止每个组件中的副本？

webpack.config.js：

{
  target: 'node',entry: {
    AppProvider: './src/components/AppProvider',Component1: './src/components/Component1',Component2: './src/components/Component2',....
  },stats: {
    colors: true,hash: true,timings: true,assets: true,chunkModules: true,modules: true,children: true,},output: {
    path: path.join(__dirname,'dist'),filename: '[name].js',libraryTarget: 'umd',umdNamedDefine: true,node: {
    net: 'empty',tls: 'empty',dns: 'empty',mode: process.env.NODE_ENV,devtool: false,optimization: {
    minimize: true,minimizer: [
      new TerserPlugin({
        sourceMap: false,parallel: true,terserOptions: {
          warningsFilter: true,compress: {
            drop_console: false,output: {
            comments: false,extractComments: false,}),],resolve: {
    alias: {
      react: path.resolve(__dirname,'./node_modules/react'),'react-dom': path.resolve(__dirname,'./node_modules/react-dom'),externals: {
    react: {
      commonjs: 'react',commonjs2: 'react',amd: 'React',root: 'React','react-dom': {
      commonjs: 'react-dom',commonjs2: 'react-dom',amd: 'ReactDOM',root: 'ReactDOM',module: {
    strictExportPresence: true,rules: [
      {
        test: /\.(js|jsx)?$/i,include: [path.resolve(__dirname,'src')],exclude: /node_modules/,enforce: 'post',loader: 'babel-loader',options: {
          presets: ['@babel/react','@babel/preset-env'],{
        test: /\.js$/,loader: 'string-replace-loader',options: {
          search: '__VERSION__',replace: VERSION,flags: 'g',{
        test: /\.(scss|css)$/i,use: [
          { loader: 'style-loader' },{
            loader: 'css-loader',options: {
              importLoaders: 2,modules: false,{
            loader: 'postcss-loader',options: {
              sourceMap: true,config: {
                path: 'postcss.config.js','sass-loader',sideEffects: true,{
        test: /\.(jpe?g|png|gif|svg)$/i,use: [
          {
            loader: 'file-loader',options: {
              name: `media/${VERSION}/[name].[hash:8].[ext]`,publicPath: CDN_URL,{
        test: /\.(woff|woff2|eot|ttf)$/i,options: {
              name: `fonts/${VERSION}/[name].[hash:8].[ext]`,plugins: [
    new webpack.DefinePlugin({
      __REACT_DEVTOOLS_GLOBAL_HOOK__: '({ isdisabled: true })',};

目录结构：

src/components/AppProvider
               Component1,...
   /shared/someContext/index.js
                      context.js
                      useSomeContext.js

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）