Модуль не найден: ошибка: не удается разрешить загрузчик стилей

ошибка

Я получил следующую ошибку при запуске команды node index.js в каталоге b.

ERROR in ../a/src/index.js
Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\qwer\Desktop\work\test\b'
@ ../a/src/index.js 3:0-21
Child html-webpack-plugin for "index.html":
     Asset    Size  Chunks  Chunk Names
index.html  544 kB       0
   [0] ../a/node_modules/html-webpack-plugin/lib/loader.js!../a/src/index.html 617 bytes {0} [built]
   [1] ../a/node_modules/lodash/lodash.js 540 kB {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.

Это прекрасно работает, когда запускается команда webpack-dev-server в каталоге a.

структура каталогов

├─a
│  │  package.json
│  │  webpack.config.js
│  │
│  ├─dist
│  ├─node_modules
│  └─src
│          index.html
│          index.js
│          index.scss
│
└─b
   │  index.js
   │  package.json
   │
   └─node_modules

источник colde

./a/package.json

{
  "name": "a",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.9",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0"
  }
}

./a/webpack.config.js

const path = require('path'),
      ExtractTextPlugin = require('extract-text-webpack-plugin'),
      HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + '/src/index.js',
    output: { path:path.resolve(__dirname, 'dist'), filename:'./index.js' },
    devServer: { inline:true, port:8080, contentBase:__dirname + '/dist', historyApiFallback:true, disableHostCheck:true },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                options: { cacheDirectory:true, presets:['env'] },
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                }),
                test: /\.s?css$/,
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('./index.css'),
        new HtmlWebpackPlugin({ template: __dirname + '/src/index.html', filename:'index.html', hash:true }),
    ],
    resolve: { modules:[path.resolve(__dirname, 'src'), 'node_modules'] }
};

./a/src/index.js

import 'index.scss';

console.log(1);

./b/package.json

{
  "name": "b",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.9.1",
    "webpack-dev-server": "^2.9.5"
  }
}

./b/index.js

const WebpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const config = require('../a/webpack.config');
const compiler = webpack(config);
const devServer = new WebpackDevServer(compiler, config.devServer);

devServer.listen(8080);

Я хочу разделить на каталоги a и b, как указано выше. Кажется, это проблема пути, но я ее давно не решал.:(Если вы знаете ответ, дайте мне знать, пожалуйста.

0 ответов

Другие вопросы по тегам