在npm start上找不到Multi(webpack)-dev-server模块

时间:2018-03-21 03:44:14

标签: node.js webpack angular-cli ubuntu-16.04 webpack-dev-server

我正在为webpack-dev-server和entry模块找到模块未找到错误,并且它们都已经在package.json文件中。

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
        }
    }
    }
};

请在下面找到我用于编辑的软件包,我正在使用 ubuntu 16.04 机器。

npm - 5.7.1

node - v8.10.0

nodejs - v4.2.6

Angular CLI - 1.7.3

webpack-dev-server - 2.4.5

注意:在Windows机器中编译相同的代码。

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.

1 个答案:

答案 0 :(得分:0)

这是因为路线的名称:

例如,在本节中,您有\\

"entry": {
  "main": [
    "./src\\main.ts"
  ],
  "polyfills": [
    "./src\\polyfills.ts"
  ],
  "styles": [
    "./src\\styles.css"
  ]
}

这应该由/更改:

"entry": {
  "main": [
    "./src/main.ts"
  ],
  "polyfills": [
    "./src/polyfills.ts"
  ],
  "styles": [
    "./src/styles.css"
  ]
}

在所有路径中都这样做。