从头开始生成angular 4 Webpack构建时出错

时间：2018-04-20 12:42:26

标签： angular webpack

我正在使用以下版本的Webpack和cli，我正在尝试构建一个简单的组件应用程序。

"webpack": "^4.6.0",
"webpack-cli": "^2.0.14",

我的webpack.config.json是，

    const path = require('path');
    module.exports = {
    entry: './app/main.ts',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
            },
        ],
    },
    resolve: {
        extensions: [
            '.ts',
        ],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './build'),
    },
};

在src中，我只有一个应用程序组件代码，从中生成一个包文件。我已经尝试了许多可能的方法，但无法生成包。如果我排除node_modules文件夹，它生成了成功的构建，但是没有依赖，我无法运行应用程序。如果我在依赖项中包含node_modules，则会出现以下错误：

ERROR in ./node_modules/querystring-es3/index.js
Module not found: Error: Can't resolve './decode' in '/Users/test/manualAngular/node_modules/querystring-es3'
 @ ./node_modules/querystring-es3/index.js 3:33-52
 @ ./node_modules/url/url.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/querystring-es3/index.js
Module not found: Error: Can't resolve './encode' in '/Users/test/manualAngular/node_modules/querystring-es3'
 @ ./node_modules/querystring-es3/index.js 4:37-56
 @ ./node_modules/url/url.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve './overlay' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 10:14-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve './socket' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 9:13-32
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/url/url.js
Module not found: Error: Can't resolve './util' in '/Users/test/manualAngular/node_modules/url'
 @ ./node_modules/url/url.js 25:11-28
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'loglevel' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 8:10-29
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 7:0-45 5752:53-63 5760:44-54
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Subject' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 10:0-39 4371:2-9
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Subscription' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 11:0-49 4365:39-51
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/observable/merge' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 8:0-46 5791:12-17
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/operator/share' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 9:0-44 5791:37-42
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'strip-ansi' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 7:16-37
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'webpack/hot/emitter' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 225:21-51
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

1 个答案:

答案 0 :(得分：1)

你好你的配置应该是这样的：

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

var config = {
    entry: options.entry,
    resolve: {
        alias: options.alias,
        extensions: ['.ts','.tsx','.js','.scss','.css','.html'],
        modules: ['node_modules'], // Here to specify from where webpack have to looking for vendor.
        plugins:[
            // This is to provide tsconfig file
            new TsConfigPathsPlugin({
                configFileName:ROOT+'/tsconfig.json'
            })
        ]
    }
};

// [...]

/**
 * Loaders
 * Reference: https://webpack.js.org/concepts/loaders/
 * List: https://webpack.js.org/loaders/
 * This handles most of the magic responsible for converting modules
 */
config.module = {
    rules: [
        /**
         * Compiles TypeScript files.
         */
        {
            test: /\.tsx?$/,
            use: [
                {
                    loader: 'babel-loader'
                },
                {
                    loader: '@angularclass/hmr-loader'
                },
                {
                    loader: 'awesome-typescript-loader',
                    options: {
                        configFileName: ROOT+'/tsconfig.json'
                    }
                },
                {
                    loader: 'angular2-template-loader'
                }
            ],
            // exclude: [/[node_modules|vendor]\/(?!(ng2-.+|ngx-.+))/]
        }
    ]
};

不要忘记将所有需要的加载器添加到package.json：

"@angularclass/hmr-loader": "^3.0.4",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"awesome-typescript-loader": "^3.4.1",
"angular2-template-loader": "^0.6.2",
相关问题
最新问题