Question

我是angular2和webpack的新手，我已经安装了webpack并希望使用webpack最小化文件的大小，这里是 webpack.config.js 放在根文件夹中

var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
   entry: {
  app: './src/main.ts'
},
   output: {
  filename: 'bundle.js'
},
    module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          } , 'angular2-template-loader'
        ]
      }      
    ]
  },
 plugins: [
     new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

这是我的 package.json文件也放在根文件夹

中

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "webpack --progress",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.4",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "awesome-typescript-loader": "^3.1.2",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10",
    "webpack": "^2.2.1"
  },
  "repository": {}
}

根据文档，我们要做的就是在package.json的script属性中包含命令来运行命令，所以我已经包含了这样的脚本属性

"scripts": {
    "build": "webpack --progress",
---
--
}

这样当我运行这样的命令时 npm run build 它应该以递归的方式从文件main.ts开始构建项目并给我一个输出，如webpack.config.js中所述，但是我收到这样的错误不知道出了什么问题，如果有人能给我提供至少一份适当的文件材料会有很大的帮助，我指的是this文件并没有帮助，谢谢

Answer 1

使用完整的工具堆栈设置Angular 2应用程序非常复杂且容易出错。

我的建议是使用Angular CLI来设置和运行你的项目，它现在默认使用webpack。

https://cli.angular.io/

https://github.com/angular/angular-cli

Answer 2

您的问题可能是升级您的npm和node.js

这是使用webpack进行角度2应用的良好开端它对aot，tree shake，生产服务器和开发服务器Here you go

提供了很好的支持

无法在angular2中实现webpack

2 个答案: