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的更多相关文章

  1. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  2. AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  3. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  4. AngularJS 1.x系列：AngularJS简介及第一个应用（2）

    1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...

  5. 安装webpack和webpack打包（此文转自Henery）

    Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...

  6. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  7. AngularJS 1.x系列：AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  8. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  9. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

随机推荐

  1. 在8086中，[ idata],[bx]表示内存单元时。可能是一个字节，也可能是一个字。

    可能表示一个字节,也可能表示一个字.主要由指令中另一个计算对象决定.如al表示一个字节.ax就表示一个字. 这个区别主要体现在循环中,偏移地址的循环变量是加1还是加2,al是偏移地址加1,ax是偏移地 ...

  2. Android ListView（Selector 背景图片）

    listview0.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln ...

  3. 第九章 Mass Storage设备

    9.1 Mass Storage设备介绍 USB的Mass Storage类是USB大容量储存设备类(Mass Storage Device Class).专门用于大容量存储设备,比如U盘.移动硬盘. ...

  4. 这些小众软件让你的效率提升N倍！（必备，收藏）

    大部分的我们,电脑买来之后,软件越装越多,电脑越来越卡,导致工作的效率也是越来越低. 同时还可能长期处于软件安装完又卸载的无限恶性循环中.提高工作效率是我们利用电脑办公的一大优势,安装好的软件更是可以 ...

  5. 对TCP/IP网络协议的深入浅出归纳（转）

    前段时间做了一个开发,涉及到网络编程,开发过程比较顺利,但任务完成后始终觉得有一些疑惑.主要是因为对网络协议不太熟悉,对一些概念也没弄清楚.后来 我花了一些时间去了解这些网络协议,现在对TCP/IP网 ...

  6. Android开发之AlertDialog

    http://www.cnblogs.com/Gaojiecai/archive/2011/12/10/2283156.html http://www.2cto.com/kf/201205/13187 ...

  7. MapReduce 模式、算法和用例（MapReduce Patterns, Algorithms, and Use Cases)

    在新文章“MapReduce模式.算法和用例”中,Ilya Katsov提供了一个系统化的综述,阐述了能够应用MapReduce框架解决的问题. 文章开始描述了一个非常简单的.作为通用的并行计算框架的 ...

  8. VisualC#数据库高级教程文档分享

    这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载.     1.项目创建         ...

  9. 7 个面向Web开发者的实用CSS3教程推荐

    通过CSS来创建精细.复杂的效果,成为了Web前端开发的未来趋势.世界各地的设计师认为CSS3是一项非常具有潜力的技术,未来将会创造更多不可思议的美妙设计. 本文为Web开发者带来了一些与CSS3相关 ...

  10. 【转】VIRTUALBOX导入已有.VDI文件步骤

    原文网址:http://blog.csdn.net/wanghai__/article/details/6703923 1.安装SUN VIRTUALBOX 2.新建,进入到“新建虚拟电话”对话框,下 ...