我正在配置webpack 4和babel以在生产中构建我的vue项目。 它可以正常工作，但是修复了一些npm高漏洞并在webpack配置中进行了一些编辑之后，我遇到了很多类似扩展名的错误：
ERROR in ./src/router/index.js
Module not found: Error: Can't resolve '../components/Home' in '/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/router'
resolve '../components/Home' in '/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/router'
using description file: /Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/package.json (relative path: ./src/router)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/package.json (relative path: ./src/components/Home)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.json doesn't exist
as directory
/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home doesn't exist
[/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home]
[/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.wasm]
[/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.mjs]
[/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.js]
[/Users/sarahgoldfarb/Development/Node/TalkItEasy2/client/src/components/Home.json]
@ ./src/router/index.js 6:0-37 33:17-21
@ ./src/index.js
我已按照以下说明配置了Webpack：https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772
您可以在下面找到我的webpack.config.common.js和我的webpack.config.prod.js
'use strict';
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const helpers = require('./helpers');
const isDev = process.env.NODE_ENV === 'development';
const webpackConfig = {
entry: {
polyfill: '@babel/polyfill',
main: helpers.root('./src', 'index')
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': isDev ? 'vue/dist/vue.runtime.js' : 'vue/dist/vue.runtime.min.js',
'@': helpers.root('src')
}
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader"
},
{
test: /\.vue$/,
include: [ helpers.root('src') ],
loader: 'vue-loader',
},
{
test: /\.js$/,
include: [ helpers.root('src') ],
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: `
@import "../scss/main.scss";
`
}
},
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
fallback: 'file-loader'
// name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
fallback: 'file-loader'
// name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 10000,
fallback: 'file-loader'
// name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: "index.html",
chunksSortMode: 'dependency'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
]
};
module.exports = webpackConfig;
'use strict';
const webpack = require('webpack');
const merge = require('webpack-merge');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const helpers = require('./helpers');
const commonConfig = require('./webpack.config.common').default;
const isProd = process.env.NODE_ENV === 'production';
const environment = isProd ? require('./env/prod.env') : require('./env/staging.env');
const webpackConfig = merge(commonConfig, {
mode: 'production',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: 'js/[hash].js',
chunkFilename: 'js/[id].[hash].chunk.js'
},
optimization: {
runtimeChunk: 'single',
minimizer: [
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: [ 'default', { discardComments: { removeAll: true } } ],
}
}),
new TerserPlugin({
test: /\.js(\?.*)?$/i,
cache: true,
terserOptions: {
ecma: 5,
compress: true,
output: {
comments: false,
beautify: false
}
}
})
],
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('@', '')}`;
}
},
styles: {
test: /\.css$/,
name: 'styles',
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new webpack.EnvironmentPlugin(environment),
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[id].[hash].css'
}),
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(js|css)$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.HashedModuleIdsPlugin()
]
});
if (!isProd) {
webpackConfig.devtool = 'source-map';
if (process.env.npm_config_report) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
}
module.exports = webpackConfig;
我尝试删除扩展部分，但未做任何更改。似乎确实没有考虑到它。我有一个古老而肮脏的生产配置文件，其中的“解决”和“扩展”部分完全相同，并且它的工作方式就像一个魅力……我找不到阻塞的东西……
预先感谢您的帮助