详解用webpack2搭建angular2的项目


Posted in Javascript onJune 22, 2017

webpack2和angular2搭建的项目

github地址:项目链接

  1. npm install,安装依赖包
  2. npm run dev,启动本地工程,在localhost:1699进行预览
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配置文件开发版:

import path from 'path'
import config from "./webpack.config"
import merge from "webpack-merge"
import webpack from "webpack"
import webpackDevServer from "webpack-dev-server"
import { format } from 'util'

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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue2.0实现分页组件的实例代码
Jun 22 #Javascript
纯JS实现只能输入数字的简单代码
Jun 21 #Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 #Javascript
Vue实现百度下拉提示搜索功能
Jun 21 #Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 #Javascript
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
详解Vue整合axios的实例代码
Jun 21 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP新手上路(十)
2006/10/09 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python与C互相调用的方法详解
2017/07/14 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
python Pexpect模块的使用
2020/12/25 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
物业管理专业自荐信
2014/07/01 职场文书
新闻传播专业求职信
2014/07/22 职场文书
代领毕业证委托书
2014/08/02 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
教师素质教育心得体会
2016/01/19 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL