webpack打包typescript成功了，css和html却失败？

Question

如题，这是我的配置文件,
webpack.config.js

module.exports = {
    entry:{
        main:'./src/main.ts',
        login:'./src/login.ts'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    resolve: {
        extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'css-loader'},
            {test: /\.html$/, loader: 'html-loader'},
            {test: /\.ts/, loader: 'ts-loader'}
        ]
    }
}

这是tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

这个是package.json

{
  "name": "normandy_webcam_ms",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "angular2": "^2.0.0-beta.15",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "css-loader": "^0.23.1",
    "gulp": "^3.9.1",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "html-loader": "^0.4.3",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "start": "webpack-dev-server --history-api-fallback --inline --colors --progress --display-error-details --display-cached --host 0.0.0.0 --port 8004 --content-base"
  },
  "keywords": [],
  "author": "normandy_webcam_ms",
  "license": "ISC",
  "description": ""
}

这是打包结果：图片发不出来

sunjiaqi@sunjiaqi-desktop:~/文档/normandy_webcam_ms/static$ webpack
ts-loader: Using typescript@1.8.10 and /home/sunjiaqi/文档/normandy_webcam_ms/static/tsconfig.json
Hash: f9c6803ad237bc77746e
Version: webpack 1.13.0
Time: 6758ms
          Asset     Size  Chunks             Chunk Names
login.bundle.js  5.16 MB       0  [emitted]  login
 main.bundle.js  5.27 MB       1  [emitted]  main
    + 339 hidden modules
sunjiaqi@sunjiaqi-desktop:~/文档/normandy_webcam_ms/static$ webpack

引入css和html

Answer 1

你用的是templateUrl和styleUrls，当然不会打包进bundle里喽！如果你想打包进js，你应该这么写：

//注意这里必须是相对路径哦
var tpl = <string>require('xxxx/settings.network.html');
var style = <string>require('xxxx/settings.css');

@Component({
    selector: 'settings-network',
    template: tpl,
    styles: [style],
    directives: [Pagination]
})