详解用webpack2搭建angular2的项目

webpack2和angular2搭建的项目

github地址:项目链接

  1. npm install,安装依赖包
  2. 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)
})

搭建中遇到的问题:

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

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...