Javascript 在将我的故事书从5.3更新到6.2之后,我';我遇到了ModuleNotFoundError的问题?网页或故事书有问题吗?
我有一个5.3版的故事书项目。然后我运行了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
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
};
我已经被困了一个星期了,任何帮助都将不胜感激