webpack2和angular2搭建的项目
github地址:项目链接
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
前言 由于demos/project 前端渲染是通过react.js渲染的,这就需要webpack2 对react.js及其相关JSX,ES6/7代码进行编译和混淆压缩。 webpack2 安装和文档 可访问网https://webpack.js.org/ 配置webpack2编译react.js + less + sass + antd 环境 文件目录 └── static # 项目静态文件目录
本文向大家介绍详解.Net Core + Angular2 环境搭建,包括了详解.Net Core + Angular2 环境搭建的使用技巧和注意事项,需要的朋友参考一下 本文介绍了.Net Core + Angular2 环境搭建,具体如下: 环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node
本文向大家介绍django项目搭建与Session使用详解,包括了django项目搭建与Session使用详解的使用技巧和注意事项,需要的朋友参考一下 前言 Django完全支持也匿名会话,简单说就是使用跨网页之间可以进行通讯,比如显示用户名,用户是否已经发表评论。session框架让你存储和获取访问者的数据信息,这些信息保存在服务器上(默认是数据库中),以 cookies 的方式发送和获取一个包
本文向大家介绍详解Vue使用 vue-cli 搭建项目,包括了详解Vue使用 vue-cli 搭建项目的使用技巧和注意事项,需要的朋友参考一下 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直
本文向大家介绍Angular2从搭建环境到开发步骤详解,包括了Angular2从搭建环境到开发步骤详解的使用技巧和注意事项,需要的朋友参考一下 Angular-CLI 说到 cli 大家不陌生,每出一个框架都会有对应的 cli ,俗称脚手架。angular2 本身提供了起步项目 angular2-quickstart,我尝试了一下,发现不是很好用,其它的大部分扩展需要自行安装,之后看了一下 ang
本文向大家介绍使用vue cli4.x搭建vue项目的过程详解,包括了使用vue cli4.x搭建vue项目的过程详解的使用技巧和注意事项,需要的朋友参考一下 cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1、创建项目 vue create vuetest 2、选择配置方式 这里我选择的是手动配置(使用↑ ↓箭头切换,Enter