详解用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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。