详解用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 相关文章推荐
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
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
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
php递归函数怎么用才有效
2018/02/24 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
pandas删除指定行详解
2019/04/04 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers