webpack2和angular2搭建的项目
github地址:项目链接
npm install，安装依赖包npm run dev，启动本地工程，在localhost:1699进行预览
rush:js;">
package.json
{
"name": "angular-webpack","version": "1.0.0","description": "webpack2 & angular2","scripts": {
"dev": "babel-node ./src/config/dev.js"
},"author": "Travis Lee","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配置文件开发版：
let PORT = 1699;
let PUBLIC_PATH = "http://localhost:" + PORT + "/";
let webpackConifg = 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: [
new webpack.HotModuleReplacementPlugin()
]
})
const compiler = webpack(webpackConifg);
new webpackDevServer(compiler,{
inline: true,hot: true,port: PORT,stats: {
colors: true
}
}).listen(PORT,'localhost',(err) => {
console.log(123)
})
let PUBLIC_PATH = "http://localhost:" + PORT + "/";
let webpackConifg = 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: [
new webpack.HotModuleReplacementPlugin()
]
})
const compiler = webpack(webpackConifg);
new webpackDevServer(compiler,{
inline: true,hot: true,port: PORT,stats: {
colors: true
}
}).listen(PORT,'localhost',(err) => {
console.log(123)
})
搭建中遇到的问题：
The URL 'localhost:1699/sockjs-node' is invalid，
该问题是由于webpack配置文件中的publicPath前边没有加http://，导致url解析失败
Uncaught reflect-Metadata shim is required when using class decorators，
这个问题是由于main.ts文件中没有引入 reflect-Metadata和zone.js
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
