详解用webpack2搭建angular2的项目

前端之家收集整理的这篇文章主要介绍了详解用webpack2搭建angular2的项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

webpack2和angular2搭建的项目

github地址:项目链接

  1. npm install,安装依赖包
  2. npm run dev,启动本地工程,在localhost:1699进行预览
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)
})

搭建中遇到的问题:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章