详解用webpack2搭建angular2的项目
webpack2和angular2搭建的项目
github地址:项目链接
- npminstall,安装依赖包
- npmrundev,启动本地工程,在localhost:1699进行预览
package.json { "name":"angular-webpack", "version":"1.0.0", "description":"webpack2&angular2", "scripts":{ "dev":"babel-node./src/config/dev.js" }, "author":"TravisLee", "license":"ISC", "dependencies":{ "@angular/common":"~4.0.0", "@angular/compiler":"~4.0.0", "@angular/core":"~4.0.0", "@angular/forms":"~4.0.0", "@angular/http":"~4.0.0", "@angular/platform-browser":"~4.0.0", "@angular/platform-browser-dynamic":"~4.0.0", "@angular/router":"~4.0.0", "core-js":"^2.4.1", "es6-shim":"^0.35.3", "reflect-metadata":"^0.1.8", "rxjs":"5.0.1", "zone.js":"^0.8.4" }, "devDependencies":{ "babel-core":"^6.25.0", "babel-loader":"^7.1.0", "babel-preset-es2015":"^6.24.1", "clean-webpack-plugin":"^0.1.16", "css-loader":"^0.28.4", "extract-text-webpack-plugin":"^2.1.2", "path":"^0.12.7", "style-loader":"^0.18.2", "ts-loader":"^2.1.0", "typescript":"^2.3.4", "typings":"^2.1.1", "uglifyjs-webpack-plugin":"^0.4.6", "webpack":"^2.6.1", "webpack-dev-server":"^2.5.0", "webpack-merge":"^4.1.0" } }
webpack配置文件开发版:
importpathfrom'path' importconfigfrom"./webpack.config" importmergefrom"webpack-merge" importwebpackfrom"webpack" importwebpackDevServerfrom"webpack-dev-server" import{format}from'util' letPORT=1699; letPUBLIC_PATH="http://localhost:"+PORT+"/"; letwebpackConifg=merge(config,{ devtool:"source-map", //debug:true,webpack2已切换到plugins中,据说在3中将取消 entry:{ main:[ format("webpack-dev-server/client?%s",PUBLIC_PATH), "webpack/hot/dev-server", "./src/main.ts" ] }, output:{ path:path.resolve(__dirname,'../../dist'), publicPath:PUBLIC_PATH, filename:'[name].js' }, plugins:[ newwebpack.HotModuleReplacementPlugin() ] }) constcompiler=webpack(webpackConifg); newwebpackDevServer(compiler,{ inline:true, hot:true, port:PORT, stats:{ colors:true } }).listen(PORT,'localhost',(err)=>{ console.log(123) })
搭建中遇到的问题:
TheURL'localhost:1699/sockjs-node'isinvalid,
该问题是由于webpack配置文件中的publicPath前边没有加http://,导致url解析失败
Uncaughtreflect-metadatashimisrequiredwhenusingclassdecorators,
这个问题是由于main.ts文件中没有引入reflect-metadata和zone.js
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。