错误:无法解析模块“样式加载器”

我正在将样式加载器与webpack和react框架一起使用。当我在终端中运行webpack时,Module not found: Error: Cannot resolve module 'style-loader'尽管我已正确指定了文件路径,但我仍获取import.js文件。

import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      'babel-polyfill',

      // Add your application's scripts below
      APP_DIR + '/import.js'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',

                exclude: /node_modules/,
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx', '.css']
        }
    }
};
西门泡芙Jim2020/03/17 14:58:43

如果您的node_modules与Webpack配置文件位于同一目录中,则只需添加即可context: __dirname

module.exports = {
    context: __dirname,
    entry: [
    ...

(在webpack 1和2中均可使用

村村十三阳光2020/03/17 14:58:43

我使用Windows并执行了所有操作,但没有任何效果。看来控制台没有足够的权限。因此,在管理员模式下运行后,我重新输入了

npm install

一切正常。您可以通过在node_modules目录中出现很多模块来查看结果。

小哥神无2020/03/17 14:58:43

在Webpack 3下,node_module在非标准位置,我必须同时使用resolveresolveLoader配置对象:

resolve: {
  modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
  modules: ["build-resource/js/node_modules"]
},