Модуль не найден: ошибка: не удается разрешить загрузчик стилей
ошибка
Я получил следующую ошибку при запуске команды 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, как указано выше. Кажется, это проблема пути, но я ее давно не решал.:(Если вы знаете ответ, дайте мне знать, пожалуйста.