Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在将我的故事书从5.3更新到6.2之后,我';我遇到了ModuleNotFoundError的问题?网页或故事书有问题吗?_Javascript_Reactjs_Npm_Webpack_Storybook - Fatal编程技术网

Javascript 在将我的故事书从5.3更新到6.2之后,我';我遇到了ModuleNotFoundError的问题?网页或故事书有问题吗?

Javascript 在将我的故事书从5.3更新到6.2之后,我';我遇到了ModuleNotFoundError的问题?网页或故事书有问题吗?,javascript,reactjs,npm,webpack,storybook,Javascript,Reactjs,Npm,Webpack,Storybook,我有一个5.3版的故事书项目。然后我运行了npx sb升级,然后npm启动,但是现在我遇到了一个以前没有的问题 我现在似乎遇到了一个ModuleNotFound错误 错误 ModuleNotFoundError: Module not found: Error: Can't resolve 'components/MultiSelectToolbar/stories/MultiSelectionDemo' in 'C:\Users\name\Desktop\Workspace\project\a

我有一个5.3版的故事书项目。然后我运行了
npx sb升级
,然后
npm启动
,但是现在我遇到了一个以前没有的问题

我现在似乎遇到了一个ModuleNotFound错误

错误

ModuleNotFoundError: Module not found: Error: Can't resolve 'components/MultiSelectToolbar/stories/MultiSelectionDemo' in 'C:\Users\name\Desktop\Workspace\project\asset\source\CardCollection\stories'
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\webpack\lib\Compilation.js:925:10
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\webpack\lib\NormalModuleFactory.js:401:22
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\webpack\lib\NormalModuleFactory.js:130:21
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\webpack\lib\NormalModuleFactory.js:224:22
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\neo-async\async.js:2830:7
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\neo-async\async.js:6877:13
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\webpack\lib\NormalModuleFactory.js:214:25
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\enhanced-resolve\lib\Resolver.js:213:14
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\name\Desktop\Workspace\project\asset\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\name\Desktop\Workspace\project\asset\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\name\Desktop\Workspace\project\asset\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at C:\Users\name\Desktop\Workspace\project\asset\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
resolve 'components/MultiSelectToolbar/stories/MultiSelectionDemo' in 'C:\Users\name\Desktop\Workspace\project\asset\source\CardCollection\stories'
  Parsed request is a module
  using description file: C:\Users\name\Desktop\Workspace\project\asset\package.json (relative path: ./source/CardCollection/stories)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\name\Desktop\Workspace\project\asset\source\CardCollection\stories\node_modules doesn't exist or is not a directory
      C:\Users\name\Desktop\Workspace\project\asset\source\node_modules doesn't exist or is not a directory
      C:\Users\name\Desktop\Workspace\project\node_modules doesn't exist or is not a directory
      C:\Users\name\Desktop\Workspace\node_modules doesn't exist or is not a directory
      C:\Users\name\Desktop\node_modules doesn't exist or is not a directory
      C:\Users\name\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\name\Desktop\Workspace\project\asset\node_modules
        using description file: C:\Users\name\Desktop\Workspace\project\asset\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\name\Desktop\Workspace\project\asset\package.json (relative path: ./node_modules/components/MultiSelectToolbar/stories/MultiSelectionDemo)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo.json doesn't exist
            .cjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo.cjs doesn't exist
            as directory
              C:\Users\name\Desktop\Workspace\project\asset\node_modules\components\MultiSelectToolbar\stories\MultiSelectionDemo doesn't exist

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
.storybook/webpack.config.babel.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const stylusLoader = require('stylus-loader');
const resolve = require('../tools/webpack.config.resolve');


module.exports = {
  resolve,
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loaders: 'eslint-loader',
        options: {
          failOnWarning: false,
          failOnError: false,
          emitWarning: false,
          emitError: false,
          cache: false,
          quiet: true
        },
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        exclude: [/images\//],
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.ico$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          name: 'icons/[name].[ext]',
          outputPath: 'icons/'
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        include: [path.resolve(__dirname, '../', 'node_modules'), path.resolve(__dirname, '../', 'source')],
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [new webpack.IgnorePlugin(/^\.\/.*js.map$/, /.*xterm\/lib\/addons/)]
};
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ShakePlugin = require('webpack-common-shake').Plugin;
const stylusLoader = require('stylus-loader');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

const packageJson = require('../package.json'); //loads npm config file
const BUILD_DIR = path.resolve(__dirname, '../dist/');
const APP_DIR = path.resolve(__dirname, '../source/');
const STYLE_DIR = path.resolve(__dirname, '../source/styles');
const SRC_DIR = path.resolve(__dirname, '../source');
const resolve = require('./webpack.config.resolve');

//packageJson dependencies (to be excluded from bundling)
Object.keys(packageJson.dependencies).map(key => (packageJson.dependencies[key] = key));

module.exports = {
  mode: 'production',
  entry: {
    asset: `${APP_DIR}/index.js`
  },
  bail: true,
  devtool: 'source-map', // source-map
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
        exclude: /node_modules/,
        options: {
          minimize: true
        }
      },
      {
        test: /\.js$/,
        include: [APP_DIR, path.resolve(__dirname, "../node_modules/@uxr/freeform-design-tokens")],
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { babelrc: true }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        include: SRC_DIR,
        use: [
            'style-loader',
            'css-loader',
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        include: [path.resolve(__dirname, '../', 'node_modules'), path.resolve(__dirname, '../', 'source')],
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        include: [
          path.resolve(__dirname, '../node_modules/@uxr/asset-assets'),
          path.resolve(__dirname, '../source/Grid/FrameworkComponents/images')
        ],
        // exclude: [/node_modules/, /images\/demo\//],
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: true // since images are being copied into images/ folder anyway
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        exclude: [/images\//],
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: true
        },
      },
      {
        test: /\.ico$/i,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: false
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dist')]
    }), // emptys the /dist/ folder
    new ShakePlugin(),
    // new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    // new CopyWebpackPlugin([
    //   { from: 'source/images', to: `${BUILD_DIR}/assets/images/`, ignore: ['demo/*'] },
    //   { from: 'source/fonts', to: `${BUILD_DIR}/assets/fonts/` },
    //   { from: 'source/icons', to: `${BUILD_DIR}/assets/icons/` },
    //   { from: 'samples', to: `${BUILD_DIR}/samples/`, ignore: ['**/node_modules/**'] }
    // ]),
    // new MiniCssExtractPlugin({
    //   filename: 'Grid/styles/Theme.css'
    // }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        cache: true,
        sourceMap: true,
        keep_classnames: true,
        keep_fnames: true,
        output: {
          comments: false,
        },
      }
    })],
    // minimizer: [
    //   new UglifyJsPlugin({
    //   cache: true,
    //   parallel: true,
    //   sourceMap: true,
    //   uglifyOptions: {
    //     mangle: { keep_fnames: true }, //keep_classnames: true,
    //     warnings: false,
    //     output: {
    //       comments: false,
    //     },
    //   }
    //   }),
    //   // new OptimizeCssAssetsPlugin({
    //   //   assetNameRegExp: /asset.css$/g,
    //   //   cssProcessorOptions: {
    //   //     discardComments: { removeAll: true },
    //   //     map: { inline: false },
    //   //     reduceIdents: false,
    //   //     discardUnused: { keyframes: false }
    //   //   },
    //   //   canPrint: true
    //   // })
    // ],
  },
  externals: {
    ...packageJson.dependencies
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: resolve.alias
  },
  output: {
    filename: '[name].js',
    path: `${BUILD_DIR}`,
    library: '[name]',
    libraryTarget: 'commonjs2'
  }
};
const path = require("path");
const stylesPath = "./source/styles/";
const componentsPath = "./source/";
const commonPath = "./source/common/";
const rootDir = path.join(__dirname, '../');
const general = {
  styles: path.resolve(rootDir, stylesPath),
  components: path.resolve(rootDir, componentsPath),
  common: path.resolve(rootDir, commonPath),
  "@uxr/asset": path.resolve(rootDir, componentsPath),
  storybook: path.resolve(rootDir, './.storybook')
};
const build = {
  styles: stylesPath,
  components: componentsPath,
  common: commonPath,
  "@uxr/asset": componentsPath
};
const currentEnv = process.env.NODE_ENV;
module.exports = {
  alias: currentEnv === "build" ? build : general
};
。/tools/webpack.config.babel.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const stylusLoader = require('stylus-loader');
const resolve = require('../tools/webpack.config.resolve');


module.exports = {
  resolve,
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loaders: 'eslint-loader',
        options: {
          failOnWarning: false,
          failOnError: false,
          emitWarning: false,
          emitError: false,
          cache: false,
          quiet: true
        },
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        exclude: [/images\//],
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.ico$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          name: 'icons/[name].[ext]',
          outputPath: 'icons/'
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        include: [path.resolve(__dirname, '../', 'node_modules'), path.resolve(__dirname, '../', 'source')],
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [new webpack.IgnorePlugin(/^\.\/.*js.map$/, /.*xterm\/lib\/addons/)]
};
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ShakePlugin = require('webpack-common-shake').Plugin;
const stylusLoader = require('stylus-loader');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

const packageJson = require('../package.json'); //loads npm config file
const BUILD_DIR = path.resolve(__dirname, '../dist/');
const APP_DIR = path.resolve(__dirname, '../source/');
const STYLE_DIR = path.resolve(__dirname, '../source/styles');
const SRC_DIR = path.resolve(__dirname, '../source');
const resolve = require('./webpack.config.resolve');

//packageJson dependencies (to be excluded from bundling)
Object.keys(packageJson.dependencies).map(key => (packageJson.dependencies[key] = key));

module.exports = {
  mode: 'production',
  entry: {
    asset: `${APP_DIR}/index.js`
  },
  bail: true,
  devtool: 'source-map', // source-map
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
        exclude: /node_modules/,
        options: {
          minimize: true
        }
      },
      {
        test: /\.js$/,
        include: [APP_DIR, path.resolve(__dirname, "../node_modules/@uxr/freeform-design-tokens")],
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { babelrc: true }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        include: SRC_DIR,
        use: [
            'style-loader',
            'css-loader',
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        include: [path.resolve(__dirname, '../', 'node_modules'), path.resolve(__dirname, '../', 'source')],
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        include: [
          path.resolve(__dirname, '../node_modules/@uxr/asset-assets'),
          path.resolve(__dirname, '../source/Grid/FrameworkComponents/images')
        ],
        // exclude: [/node_modules/, /images\/demo\//],
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: true // since images are being copied into images/ folder anyway
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        exclude: [/images\//],
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: true
        },
      },
      {
        test: /\.ico$/i,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: false
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dist')]
    }), // emptys the /dist/ folder
    new ShakePlugin(),
    // new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    // new CopyWebpackPlugin([
    //   { from: 'source/images', to: `${BUILD_DIR}/assets/images/`, ignore: ['demo/*'] },
    //   { from: 'source/fonts', to: `${BUILD_DIR}/assets/fonts/` },
    //   { from: 'source/icons', to: `${BUILD_DIR}/assets/icons/` },
    //   { from: 'samples', to: `${BUILD_DIR}/samples/`, ignore: ['**/node_modules/**'] }
    // ]),
    // new MiniCssExtractPlugin({
    //   filename: 'Grid/styles/Theme.css'
    // }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        cache: true,
        sourceMap: true,
        keep_classnames: true,
        keep_fnames: true,
        output: {
          comments: false,
        },
      }
    })],
    // minimizer: [
    //   new UglifyJsPlugin({
    //   cache: true,
    //   parallel: true,
    //   sourceMap: true,
    //   uglifyOptions: {
    //     mangle: { keep_fnames: true }, //keep_classnames: true,
    //     warnings: false,
    //     output: {
    //       comments: false,
    //     },
    //   }
    //   }),
    //   // new OptimizeCssAssetsPlugin({
    //   //   assetNameRegExp: /asset.css$/g,
    //   //   cssProcessorOptions: {
    //   //     discardComments: { removeAll: true },
    //   //     map: { inline: false },
    //   //     reduceIdents: false,
    //   //     discardUnused: { keyframes: false }
    //   //   },
    //   //   canPrint: true
    //   // })
    // ],
  },
  externals: {
    ...packageJson.dependencies
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: resolve.alias
  },
  output: {
    filename: '[name].js',
    path: `${BUILD_DIR}`,
    library: '[name]',
    libraryTarget: 'commonjs2'
  }
};
const path = require("path");
const stylesPath = "./source/styles/";
const componentsPath = "./source/";
const commonPath = "./source/common/";
const rootDir = path.join(__dirname, '../');
const general = {
  styles: path.resolve(rootDir, stylesPath),
  components: path.resolve(rootDir, componentsPath),
  common: path.resolve(rootDir, commonPath),
  "@uxr/asset": path.resolve(rootDir, componentsPath),
  storybook: path.resolve(rootDir, './.storybook')
};
const build = {
  styles: stylesPath,
  components: componentsPath,
  common: commonPath,
  "@uxr/asset": componentsPath
};
const currentEnv = process.env.NODE_ENV;
module.exports = {
  alias: currentEnv === "build" ? build : general
};
。/tools/webpack.config.resolve.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const stylusLoader = require('stylus-loader');
const resolve = require('../tools/webpack.config.resolve');


module.exports = {
  resolve,
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loaders: 'eslint-loader',
        options: {
          failOnWarning: false,
          failOnError: false,
          emitWarning: false,
          emitError: false,
          cache: false,
          quiet: true
        },
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        exclude: [/images\//],
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.ico$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          name: 'icons/[name].[ext]',
          outputPath: 'icons/'
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        include: [path.resolve(__dirname, '../', 'node_modules'), path.resolve(__dirname, '../', 'source')],
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [new webpack.IgnorePlugin(/^\.\/.*js.map$/, /.*xterm\/lib\/addons/)]
};
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ShakePlugin = require('webpack-common-shake').Plugin;
const stylusLoader = require('stylus-loader');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

const packageJson = require('../package.json'); //loads npm config file
const BUILD_DIR = path.resolve(__dirname, '../dist/');
const APP_DIR = path.resolve(__dirname, '../source/');
const STYLE_DIR = path.resolve(__dirname, '../source/styles');
const SRC_DIR = path.resolve(__dirname, '../source');
const resolve = require('./webpack.config.resolve');

//packageJson dependencies (to be excluded from bundling)
Object.keys(packageJson.dependencies).map(key => (packageJson.dependencies[key] = key));

module.exports = {
  mode: 'production',
  entry: {
    asset: `${APP_DIR}/index.js`
  },
  bail: true,
  devtool: 'source-map', // source-map
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
        exclude: /node_modules/,
        options: {
          minimize: true
        }
      },
      {
        test: /\.js$/,
        include: [APP_DIR, path.resolve(__dirname, "../node_modules/@uxr/freeform-design-tokens")],
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { babelrc: true }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        include: SRC_DIR,
        use: [
            'style-loader',
            'css-loader',
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        include: [path.resolve(__dirname, '../', 'node_modules'), path.resolve(__dirname, '../', 'source')],
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        include: [
          path.resolve(__dirname, '../node_modules/@uxr/asset-assets'),
          path.resolve(__dirname, '../source/Grid/FrameworkComponents/images')
        ],
        // exclude: [/node_modules/, /images\/demo\//],
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: true // since images are being copied into images/ folder anyway
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        exclude: [/images\//],
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: true
        },
      },
      {
        test: /\.ico$/i,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]',
          emitFile: false
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dist')]
    }), // emptys the /dist/ folder
    new ShakePlugin(),
    // new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    // new CopyWebpackPlugin([
    //   { from: 'source/images', to: `${BUILD_DIR}/assets/images/`, ignore: ['demo/*'] },
    //   { from: 'source/fonts', to: `${BUILD_DIR}/assets/fonts/` },
    //   { from: 'source/icons', to: `${BUILD_DIR}/assets/icons/` },
    //   { from: 'samples', to: `${BUILD_DIR}/samples/`, ignore: ['**/node_modules/**'] }
    // ]),
    // new MiniCssExtractPlugin({
    //   filename: 'Grid/styles/Theme.css'
    // }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        cache: true,
        sourceMap: true,
        keep_classnames: true,
        keep_fnames: true,
        output: {
          comments: false,
        },
      }
    })],
    // minimizer: [
    //   new UglifyJsPlugin({
    //   cache: true,
    //   parallel: true,
    //   sourceMap: true,
    //   uglifyOptions: {
    //     mangle: { keep_fnames: true }, //keep_classnames: true,
    //     warnings: false,
    //     output: {
    //       comments: false,
    //     },
    //   }
    //   }),
    //   // new OptimizeCssAssetsPlugin({
    //   //   assetNameRegExp: /asset.css$/g,
    //   //   cssProcessorOptions: {
    //   //     discardComments: { removeAll: true },
    //   //     map: { inline: false },
    //   //     reduceIdents: false,
    //   //     discardUnused: { keyframes: false }
    //   //   },
    //   //   canPrint: true
    //   // })
    // ],
  },
  externals: {
    ...packageJson.dependencies
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: resolve.alias
  },
  output: {
    filename: '[name].js',
    path: `${BUILD_DIR}`,
    library: '[name]',
    libraryTarget: 'commonjs2'
  }
};
const path = require("path");
const stylesPath = "./source/styles/";
const componentsPath = "./source/";
const commonPath = "./source/common/";
const rootDir = path.join(__dirname, '../');
const general = {
  styles: path.resolve(rootDir, stylesPath),
  components: path.resolve(rootDir, componentsPath),
  common: path.resolve(rootDir, commonPath),
  "@uxr/asset": path.resolve(rootDir, componentsPath),
  storybook: path.resolve(rootDir, './.storybook')
};
const build = {
  styles: stylesPath,
  components: componentsPath,
  common: commonPath,
  "@uxr/asset": componentsPath
};
const currentEnv = process.env.NODE_ENV;
module.exports = {
  alias: currentEnv === "build" ? build : general
};
我已经被困了一个星期了,任何帮助都将不胜感激