Javascript angular 4的Webpack 4配置-将编译时出错，但在页面加载时找不到文件

众所周知，迁移到webpack 4的文档非常有限

所以我按照这里的指南看了网页的角度指南，这里是我到目前为止所做的

我的angular应用程序与angular网页教程中的一样

目录结构

我的依赖项…

"dependencies": {
  "@angular/common": "~4.2.0",
  "@angular/compiler": "~4.2.0",
  "@angular/core": "~4.2.0",
  "@angular/forms": "~4.2.0",
  "@angular/http": "~4.2.0",
  "@angular/platform-browser": "~4.2.0",
  "@angular/platform-browser-dynamic": "~4.2.0",
  "@angular/router": "~4.2.0",
  "core-js": "^2.4.1",
  "rxjs": "5.0.1",
  "zone.js": "^0.8.4"
},
"devDependencies": {
  "@types/node": "^6.0.45",
  "file-loader": "^1.1.11",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^3.2.0",
  "ts-loader": "^4.3.1",
  "typescript": "^2.9.1",
  "webpack": "^4.10.2",
  "webpack-cli": "^3.0.1",
  "webpack-merge": "^4.1.2"
}

我的tsconfig

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": ["node"],
    "typeRoots": ["./node_modules/@types"]
  }
}

webpack.dev.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');

module.exports = webpackMerge(commonConfig, {
   mode: 'development',
   devtool: 'inline-source-map',
});

var webpack = require('webpack');
var helpers = require('./helpers');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        polyfills: './src/main.ts',
        vendor: './src/main.ts',
        main: './src/main.ts'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],
    module:{
        rules:[
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },
    output: {
        path: helpers.root('dist'),
        publicPath: '/',
        filename: '[name].bundle.js',
        chunkFilename: '[id].chunk.js'
    }
}

webpack.common.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');

module.exports = webpackMerge(commonConfig, {
   mode: 'development',
   devtool: 'inline-source-map',
});

var webpack = require('webpack');
var helpers = require('./helpers');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        polyfills: './src/main.ts',
        vendor: './src/main.ts',
        main: './src/main.ts'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],
    module:{
        rules:[
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },
    output: {
        path: helpers.root('dist'),
        publicPath: '/',
        filename: '[name].bundle.js',
        chunkFilename: '[id].chunk.js'
    }
}

好的，我在使用npm脚本，但在运行

webpack--config-config/webpack.dev.js

时，我也在版本4上全局安装了webpack

1-我收到以下警告

WARNING in ./node_modules/@angular/core/@angular/core.es5.js
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./src/app/app.module.ts 5644:15-36 10:13-37
 @ ./src/main.ts

其次，当我真的去查看应用程序时，它说找不到main/js、vendor和polyfill。我做错了什么。我愚弄了所有的例子，查看了大约10个教程中的打字脚本，但似乎没有一个适合Webpack4。我删除了JsUglify和其他类似的问题，只是为了制作一个最小的锅炉板

我做错了什么

---

**请注意ANGULAR提供的ANGULAR网页包示例不起作用！！“hense是为scratch构建样板文件的工具，其次，所有其他示例都运行webpack 2/3或angular 2/6，这没有多大帮助

在我的webpack配置中，我通过

const entryPoints=[“内联”、“多填充”、“样式”、“供应商”、“主”]；

使用HtmlWebpackPlugin

plugins.push(new HtmlWebpackPlugin({
    "template": "./src/index.html",
    "filename": "./index.html",
    "hash": false,
    "inject": true,
    "compile": true,
    "favicon": false,
    "minify": false,
    "cache": true,
    "showErrors": false,
    "chunks": "all",
    "excludeChunks": [],
    "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;
      }
    }

plugins.push（新的HtmlWebpackPlugin({
“模板”：“/src/index.html”，
“文件名”：“/index.html”，
“hash”：false，
“注入”：正确，
“编译”：正确，
“favicon”：错，
“缩小”：错误，
“缓存”：正确，
“阵雨者”：假，
“块”：“全部”，
“排除块”：[]，
“xhtml”：没错，
“ChunksortMode”：函数排序（左、右）{
设leftIndex=entryPoints.indexOf（left.names[0]）；
设rightindex=entryPoints.indexOf（right.names[0]）；
如果（左索引>右索引）{
返回1；
}
else if（左索引<右索引）{
返回-1；
}
否则{
返回0；
}
}

你找到了吗？是的，问题不在angular its上，无论是我的Tconfig还是web pack设置。angular cli现在默认使用webpack运行。使用webpack构建一个运行完美的应用程序，将文件和设置传输到我的样板文件，什么都没有。我无法相信我有一个向下标记！！！你想知道我的问题是什么原因吗因为Angular 6和Wepack 4的文档都没有帮助。将很快发布工作答案，以显示示例偏离的程度