I'm getting module not found error for webpack-dev-server and entry module and both of them are already in the package.json file.
Webpack.config.js
const fs = require('fs');
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');
const { NoEmitOnErrorsPlugin, EnvironmentPlugin, HashedModuleIdsPlugin, LoaderOptionsPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin, SuppressExtractedTextChunksWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin, UglifyJsPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');
var webpack = require('webpack');
const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
const entryPoints = ["inline", "polyfills", "sw-register", "styles", "vendor", "main"];
const minimizeCss = true;
const baseHref = "/sites/g/files/";
const deployUrl = "";
const postcssPlugins = function () {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false,
safe: true,
mergeLonghand: false,
discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
};
return [
require('postcss-apply')(),
postcssUrl({
url: (URL) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${URL}`;
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
}
}),
require('postcss-mixins')(),
require('postcss-nested')(),
require('postcss-cssnext')({
browsers: 'last 2 versions',
features: {
autoprefixer: {
remove: false // faster if not processing legacy css
}
}
}),
//autoprefixer(),
].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};
module.exports = {
"resolve": {
"extensions": [
".ts",
".js"
],
"modules": [
"./node_modules",
"./node_modules"
]
},
"resolveLoader": {
"modules": [
"./node_modules",
"./node_modules"
]
},
"entry": {
"main": [
"./src\\main.ts"
],
"polyfills": [
"./src\\polyfills.ts"
],
"styles": [
"./src\\styles.css"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"publicPath": "/sites/g/files/",
//"publicPath": "/sites/g/files/",
"filename": "[name].[chunkhash:20].bundle.js",
"chunkFilename": "[id].[chunkhash:20].chunk.js"
},
"module": {
"rules": [
{
"enforce": "pre",
"test": /\.js$/,
"loader": "source-map-loader",
"exclude": [
/\/node_modules\//
]
},
{
"test": /\.json$/,
"loader": "json-loader"
},
{
"test": /\.html$/,
"loader": "raw-loader"
},
{
"test": /\.(eot|svg)$/,
"loader": "file-loader?name=[name].[ext]"
},
{
"test": /\.(jpg|png|svg|gif|otf|ttf|woff|woff2|cur|ani)$/,
"loader": "url-loader?name=[name].[ext]&limit=10000"
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap" : false,
"importLoaders" : 1,
"minimize" : true,
"url": false
}
},
{
"loader": "postcss-loader"
},
]
},
{
"exclude": [
path.join(process.cwd(), "assets\\style.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader"
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "assets\\style.css")
],
"test": /\.less$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader"
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader"
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"loaders": ExtractTextPlugin.extract({
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1,
"minimize" : true,
"url": false
}
},
{
"loader": "postcss-loader"
}
],
"publicPath": ""
})
},
{
"include": [
path.join(process.cwd(), "assets\\style.css")
],
"test": /\.scss$|\.sass$/,
"loaders": ExtractTextPlugin.extract({
"use": [
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader"
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
],
"publicPath": ""
})
},
{
"include": [
path.join(process.cwd(), "assets\\style.css")
],
"test": /\.less$/,
"loaders": ExtractTextPlugin.extract({
"use": [
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader"
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
],
"publicPath": ""
})
},
{
"include": [
path.join(process.cwd(), "assets\\style.css")
],
"test": /\.styl$/,
"loaders": ExtractTextPlugin.extract({
"use": [
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader"
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
],
"publicPath": ""
})
},
{
"test": /\.ts$/,
"loader": "@ngtools/webpack"
}
]
},
"plugins": [
new LoaderOptionsPlugin({
debug: true,
}),
new webpack.DefinePlugin({
'imageSRC': JSON.stringify("/sites/g/files/"),
}),
new NoEmitOnErrorsPlugin(),
new GlobCopyWebpackPlugin({
"patterns": [
"assets",
"favicon.ico"
],
"globOptions": {
"cwd": path.join(process.cwd(), "/"),
"dot": true,
"ignore": "**/.gitkeep"
}
}),
new ProgressPlugin(),
new HtmlWebpackPlugin({
"template": "./src\\index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Webpack App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}),
new BaseHrefWebpackPlugin({baseHref: '/sites/g/files/'}),
new CommonsChunkPlugin({
"name": [
"inline"
],
"minChunks": null
}),
new CommonsChunkPlugin({
"name": [
"vendor"
],
"minChunks": (module) => {
return module.resource
&& (module.resource.startsWith(nodeModules)
|| module.resource.startsWith(genDirNodeModules)
|| module.resource.startsWith(realNodeModules));
},
"chunks": [
"main"
]
}),
new ExtractTextPlugin({
"filename": "[name].[contenthash:20].bundle.css"
}),
new SuppressExtractedTextChunksWebpackPlugin(),
new EnvironmentPlugin({
"NODE_ENV": "production"
}),
new HashedModuleIdsPlugin({
"hashFunction": "md5",
"hashDigest": "base64",
"hashDigestLength": 4
}),
new UglifyJsPlugin({
"mangle": {
"screw_ie8": true
},
"compress": {
"screw_ie8": true,
"warnings": true,
"unused": true,
"dead_code": true,
"drop_debugger": true,
"drop_console": true
},
"output": {
"comments": false
},
"sourceMap": false
}),
new AotPlugin({
"mainPath": "main.ts",
"hostReplacementPaths": {
"environments\\environment.ts": "environments\\environment.prod.ts"
},
"exclude": [],
"tsConfigPath": "src\\tsconfig.app.json"
})
],
"node": {
"fs": "empty",
"global": true,
"crypto": "empty",
"tls": "empty",
"net": "empty",
"process": true,
"module": false,
"clearImmediate": false,
"setImmediate": false
},
"devServer": {
"historyApiFallback": true,
"proxy": {
'/rest/*': {
"target": "http://example.com",
"secure": false,
"changeOrigin": true
},
'/sites/*': {
"target": "http://example.com",
"secure": false,
"changeOrigin": true
}
}
}
};
Please find below the packages i'm using for the compilation and i'm using ubuntu 16.04 machine.
npm - 5.7.1
node - v8.10.0
nodejs - v4.2.6
Angular CLI - 1.7.3
webpack-dev-server - 2.4.5
NOTE : the same code compiles fine in windows machines.
ERROR in multi (webpack)-dev-server/client?http://localhost:4200 ./src/styles.css
Module not found: Error: Can't resolve './src\styles.css' in '/home/palani/ngd8'
@ multi (webpack)-dev-server/client?http://localhost:4200 ./src/styles.css
ERROR in Error: Child compilation failed:
Entry module not found: Error: Can't resolve '/home/palani/ngd8/src\index.html ' in '/home/palani/ngd8':Error: Can't resolve '/home/palani/ngd8/src\index.html' in '/home/palani/ngd8'
- compiler.js:76
[ngd8]/[html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:291 Compiler.<anonymous>
[ngd8]/[webpack]/lib/Compiler.js:291:10
- Compiler.js:494
[ngd8]/[webpack]/lib/Compiler.js:494:13
- Tapable.js:202 next
[ngd8]/[tapable]/lib/Tapable.js:202:11
- CachePlugin.js:62 Compiler.<anonymous>
[ngd8]/[webpack]/lib/CachePlugin.js:62:5
- Tapable.js:206 Compiler.applyPluginsAsyncSeries
[ngd8]/[tapable]/lib/Tapable.js:206:13
- Compiler.js:491
[ngd8]/[webpack]/lib/Compiler.js:491:10
- Tapable.js:202 next
[ngd8]/[tapable]/lib/Tapable.js:202:11
- suppress-entry-chunks-webpack-plugin.js:38 Compilation.compilation.plugin
[ngd8]/[@angular]/cli/plugins/suppress-entry-chunks-webpack-plugin.js:38:17
- Tapable.js:206 Compilation.applyPluginsAsyncSeries
[ngd8]/[tapable]/lib/Tapable.js:206:13
- Compilation.js:645 self.applyPluginsAsync.err
[ngd8]/[webpack]/lib/Compilation.js:645:19
- Tapable.js:195 Compilation.applyPluginsAsyncSeries
[ngd8]/[tapable]/lib/Tapable.js:195:46
- Compilation.js:636 self.applyPluginsAsync.err
[ngd8]/[webpack]/lib/Compilation.js:636:11
- Tapable.js:202 next
[ngd8]/[tapable]/lib/Tapable.js:202:11
- UglifyJsPlugin.js:230 Compilation.compilation.plugin
[ngd8]/[webpack]/lib/optimize/UglifyJsPlugin.js:230:5
- Tapable.js:206 Compilation.applyPluginsAsyncSeries
[ngd8]/[tapable]/lib/Tapable.js:206:13
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './environments/environment' in '/home/palani/ngd8/src\'
@ ./src/main.ts 2:0-57
@ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/palani/ngd8/src\'
@ ./src/main.ts 3:0-74
@ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts
Child html-webpack-plugin for "index.html":
ERROR in Entry module not found: Error: Can't resolve '/home/palani/ngd8/src\index.html' in '/home/palani/ngd8'
webpack: Failed to compile.
