[AngularJS + Webpack] Using Webpack for angularjs
1. Install webpack & angular:
npm install webpack angular
2. Create webpack.config.js file:
module.exports = {
context: __dirname + '/app',
entry: './app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
}
}
The context is: app folder
The entry file is: app.js
The output: path is build folder and filename is bundle.js.
3. app.js:
var anuglar = require('angular');
var ngModule = angular.module('app', []); console.log(ngModule);
4. index.js:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Webpack + AngularJS</title>
</head>
<body ng-app="app"> </body>
<script src="../build/bundle.js"></script>
</html>
5. run webpack:
webpack -watch
6. In the web broswer console, you will see the ngModule object.
[AngularJS + Webpack] Using Webpack for angularjs的更多相关文章
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- AngularJS 1.x系列:AngularJS简介及第一个应用(2)
1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...
- 安装webpack和webpack打包(此文转自Henery)
Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...
- Webpack学习-Webpack初识
一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...
- AngularJS 1.x系列:AngularJS服务-Service
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- 优雅哥学 Webpack - 01 - Webpack 5 快速体验
程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...
- AngularJS开发指南11:AngularJS的model,controller,view详解
model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...
随机推荐
- [Gauss]POJ1830 开关问题
中文题 题意不多说 这题乍一看 就是求个自由未知量个数 相当简单 其实呢 其中要注意的细节还是很多的: 1.光求了自由未知量个数 还不够 ∵求的是可行方案的总数 因此 答案是 2^(自由未知量个数) ...
- easyui源码翻译1.32--Slider(滑动条)
前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...
- ANDROID_MARS学习笔记_S01原始版_020_Mp3player001_歌曲列表
一.项目设计 二.歌曲列表简介 1.利用java.net.HttpURLConnection以流的形式下载xml文件为String 2.自定义ContentHandler-->Mp3ListCo ...
- Nuget
Install-Package Microsoft.AspNet.WebApi.Cors
- php stdClass Object 问题
Array ( [0] => stdClass Object ( [term_id] => 3 [name] => apache [slug] => apache [term_ ...
- module_init宏解析
在init.h中我们看到 #define module_init(x) __initcall(x); 还看到 #define __initcall(fn) device_initcall(fn) 还有 ...
- Good vs Evil
Good vs Evil Description Middle Earth is about to go to war. The forces of good will have many battl ...
- PO > Create PO时关于汇率问题需要注意的步骤
为了使得RMB采购的PO在审核时不会提示汇率丢失(如下图),在创建PO时需要注意几个步骤. 1)手动创建PO:在建立PO行之前,应该选择好正确的"地点","币 ...
- HTTP请求中的缓存(cache)机制
http://www.chaorenmao.com/blog/?p=79 流程 当资源第一次被访问的时候,HTTP头部如下 (Request-Line) GET /a.html HTTP/1.1Ho ...
- Android Activity管理类
public class AppManager { private static Stack<Activity> activityStack; private static AppMana ...