webpack을 사용하여 angular2 + systemjs 프로젝트 빌드 404 템플릿 오류

Question

webpack을 구성하여 (적어도 현재는) 프로젝트를 빌드하고 그 동안 시스템 작업을 유지하십시오 (이 프로젝트의 개발은 systemjs로 시작됩니다.).

지금, 나는 내 프로젝트에 웹팩를 삽입하기 3 일전 시도, 나는 기본적으로 내가 commonjs에 tsconfig.json 전환 https://angular.io/docs/ts/latest/guide/webpack.html

(웹팩 설정에 대해 아무것도 만지지 않았다) 나는 여기 모든 사용 , npm을 실행하여 명령을 실행하여 링크에서 찾을 수 있으며 dist/index.html을 수정하여 완전히 호환되도록 만들었습니다 (일부 원래 systemjs 항목 제거). zone.js가 내 구성 요소의 템플릿을 찾을 수 없기 때문에 무엇을해도 404 오류으로 가득하지만 원하는 곳의 모든 템플릿을 이동해도 완벽하게 작동합니다.

나는 이걸 찾았고, 필요로하는 템플릿을 가져와야하는 webpack 때문 이었지만, angular2-template-loader이 거기에있다. 이 문제를 해결하려면 어떻게해야합니까?

이 (webpack.common.js 같은 각도 가이드에 이름) 주요 웹팩 구성입니다 :

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'html' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     loader: 'file?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 

    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }) 
    ] 
}; 

도움을 바라가, 감사합니다.

Answer 1

동일한 문제가 있으며 임시 솔루션으로 copy-webpack-plugin을 사용하여 CSS 및 HTML 파일을 복사하고 있습니다.

"copy-webpack-plugin": "^2.1.3", 

이 그런 다음 webpack.common.js에 파일이 는 상기 문을 필요로 추가

이이 package.json 파일에 devDependencies에 CopyWebpackPlugin를 추가 할하려면 상단 :

var CopyWebpackPlugin = require('copy-webpack-plugin'); 

그리고 나서 에 사용합니다. 플러그인 당신의 webpack.common.js 파일의 섹션 :

plugins: [ 
    new CopyWebpackPlugin([ 
     { from: 'src/*.html', to: './' } 
    ]), 
    new CopyWebpackPlugin([ 
     { from: 'src/*.css', to: './' } 
    ]) 
]