更新到新的Webpack(从1到3)后,所有别名(使用webpack --display-error-details
时都会发生以下错误:
ERROR in ./app/components/Units/Material/_/Views/index.css
Module not found: Error: Can't resolve './config/root.css' in '/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views'
resolve './config/root.css' in '/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views'
using description file: /home/cpt/Desktop/prod/local/package.json (relative path: ./app/components/Units/Material/_/Views)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/cpt/Desktop/prod/local/package.json (relative path: ./app/components/Units/Material/_/Views)
using description file: /home/cpt/Desktop/prod/local/package.json (relative path: ./app/components/Units/Material/_/Views/config/root.css)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css.json doesn't exist
as directory
/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css doesn't exist
这是我的webpack.config.js
:
/* eslint-disable */
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const config = require('../config');
const write = require('./write');
const defaultConfig = require('./default.config');
var version;
try {
version = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'version.json'), 'utf8'));
version += 1;
fs.writeFileSync(path.resolve(__dirname, 'version.json'), version);
} catch (e) {
version = 0;
fs.writeFileSync(path.resolve(__dirname, 'version.json'), 0);
}
module.exports = Object.assign({}, {
entry: path.resolve(__dirname, '..', 'client', 'index.js'),
output: {
filename: `application-[hash].version.${version}.js`,
path: path.resolve(__dirname, '..', 'public', 'assets'),
publicPath: `/public/assets/`
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, '..', 'app'),
path.resolve(__dirname, '..', 'client'),
path.resolve(__dirname, '..', 'utils'),
path.resolve(__dirname, '..', 'config')
]
},
{
test: /\.css$/,
use: {
loader: 'css-loader',
options: {
modules: true,
localIdentName: config.get('classnames:production')
}
}
},
{
test: /\.sss$/,
use: {
loader: 'sass-loader',
options: {
modules: true,
localIdentName: config.get('classnames:production')
}
}
}]
},
plugins: [
new ExtractTextPlugin(`application-[hash].version.${version}.css`, {allChunks: true}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
BROWSER: true,
API_ROOT: JSON.stringify(process.env.API_ROOT || '')
}
}),
new webpack.optimize.UglifyJsPlugin({
output: {comments: false},
compress: {warnings: false}
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.AggressiveMergingPlugin(),
write({
dirname: path.resolve(__dirname, '..', 'public', 'assets'),
processMainOnly: true,
version
})
],
resolve: {
alias: {
constants: path.resolve(__dirname, '../app/constants'),
actions: path.resolve(__dirname, '../app/actions'),
components: path.resolve(__dirname, '../app/components'),
reducers: path.resolve(__dirname, '../app/reducers'),
config: path.resolve(__dirname, '../config'),
modules: path.resolve(__dirname, '../app/modules'),
utils: path.resolve(__dirname, '../utils'),
api: path.resolve(__dirname, '../app/api.js')
},
modules: [
'node_modules',
'components'
]
}
});
还有我的package.json
:https://jsonblob.com/408db155-6746-11e9-89b4-f5e81a4a1a2f
我如何导入css
文件:
@import 'config/root.css';
我的文件夹结构:
├── app
│ ├── components
| ├──some_component
| ├──index.js
| ├──index.css
│ ├── App.js
├── webpack
│ ├── webpack.config.js
├── config
│ ├── root.css
请告诉我,怎么回事? Alias忠实地引用config文件夹,问题是100%导入。
此外,我重复一遍,问题不仅出在config文件夹,还有其余的别名。
在此先感谢您的任何建议或答案。