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. Java从入门到精通（一）

    Java编程可以分为三个方向 ① Java se (j2se) 桌面开发 ② Java ee (j2ee) WEB开发 ③ Java me (j2me) 手机开发 java se 是基础中的基础 Ja ...

  2. USB Type-C，接口上的大统一？

    这款 24-pin 连接器的机械设计反应了设计人员从 Micro-B 连接器上获得的历史教训,它无需确定插入的正反方向并可实现 10000 次的插拔.使用者再也不需要担心“哪头上,哪头下”,因为 US ...

  3. VC2008下CRichEditView加载RichEdit4.1版本（还有一些类似的文章）

         在之前的文章<RichEdit 各个版本介绍>中,写到RichEdit已经到达6.0版本了,而我们经常编程使用的却还是2.0,在vc6.0中甚至还使用1.0版本,更高的版本修复了 ...

  4. 打死也不换系统？笑谈过气的Windows XP

    http://tech.qq.com/a/20131012/007336.htm 按照IT领域的“安迪-比尔定律”:软件和游戏不断生成过户需求,硬件则通过技术创新来消化这些需求,这个过程会刺激用户在电 ...

  5. 【HDOJ】1097 A hard puzzle

    题目和1061非常相似,几乎可以复用. #include <stdio.h> ][]; int main() { int a, b; int i, j; ; i<; ++i) { b ...

  6. 2016年中国500强利润率最高的公司，中国500强最赚钱的40家公司，ROE最高的公司

    2016年中国500强利润率最高的公司     排名 公司名称 利润率 62 阿里巴巴集团控股有限公司 73.09% 87 百度股份有限公司 50.71% 195 国信证券股份有限公司 47.87% ...

  7. poi大数据导入解决方法

    This one comes up quite a lot, but often the reason isn't what you might initially think. So, the fi ...

  8. VS2012、VS2010、VS2008常用的快捷键

    下面为大家带来VS各个版本常用的快捷方式,希望对大家开发过程中有帮助: 强迫智能感知:Ctrl+J: 强迫智能感知显示参数信息:Ctrl-Shift-空格: Ctrl+E,D ----格式化全部代码 ...

  9. BZOJ_1612_[Usaco2008_Jan]_Cow_Contest_奶牛的比赛_(dfs)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1612 \(n\)头奶牛比赛,给出一些胜负情况,问可以确定多少头奶牛的排名. 分析 无论胜负,只 ...

  10. mysql备份脚本

    [root@AY130828161048465847Z ~]# vi mysqlbak.sh #!/bin/bash USERNAME=rootPASSWORD=mysqlDBNAME=test DA ...