Wyskakuje mi taki błąd przy komendzie npm start, ktoś wie o co chodzi?
> [email protected] start C:\Users\Robert\Desktop\kurswebdev\projektUdemy\udemy-react-project
> webpack-dev-server --mode=development
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\Robert\Desktop\kurswebdev\projektUdemy\udemy-react-project\node_modules\webpack-dev-server\bin\webpack-dev-server.js:12:17)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --mode=development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Robert\AppData\Roaming\npm-cache\_logs\2020-11-05T17_16_14_896Z-debug.log
webpack.config.js
const { merge } = require('webpack-merge');
const commonConfiguration = require('./webpack/common');
module.exports = (_env, { mode }) => {
const properlyConfig = require(`./webpack/${mode}`);
const mergedConfig = merge(commonConfiguration, properlyConfig);
return mergedConfig;
}
production.js
const { CleanWebPackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin({}),
],
},
module: {
rules: [{
test: /\.(s(a|c)ss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]',
}
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(s(a|c)ss|css)$/,
exlude: /\.module(s(a|c)ss)$/,
loader: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
]
},
plugins: [
new CleanWebPackPlugin(),
new MiniCssExtractPlugin({
filename: 'style.[contenthash:6].css',
chunkFilename: 'style.[contenthash:6].css',
publicPath: './'
})
]
};
development.js
module.exports = {
devServer: {
contentBase: './public',
port: 3000,
},
devtool: 'inline-source-map',
module: {
rules: [{
test: /\.module\.s(a|c)ss$/,
use: [
'style=loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]',
}
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(s(a|c)ss|css)$/,
exlude: /\.module(s(a|c)ss)$/,
loader: [
'style=loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
],
},
};
package.json
{
"name": "project",
"version": "1.0.0",
"description": "My project",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode=development",
"build": "webpack --mode=production"
},
"author": "rm",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"bem-css-modules": "^1.4.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.2.1",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass-loader": "^10.0.4",
"style-loader": "^2.0.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.3.0"
}
}
common.js
const path = require('path').resolve;
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: path(__dirname, '..', 'src', 'index.js'),
},
output: {
filename: '[name].[contenthash:6].js',
path: path(__dirname, "..", "build"),
},
reslove: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: path(__dirname, '..', 'public', 'index.html')
})
]
}