Webpack 3-找不到模块:错误:无法解决“”

时间:2019-04-23 11:00:20

标签: reactjs webpack webpack-3

更新到新的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.jsonhttps://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文件夹,还有其余的别名。

在此先感谢您的任何建议或答案。

0 个答案:

没有答案