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. *[codility]MaxCounters

    http://codility.com/demo/take-sample-test/maxcounters 简单题.注意要记录两个max,一个是最大值,一个是已经生效的最大值. // you can ...

  2. [topcoder]BusinessTasks

    水题,不值一提.http://community.topcoder.com/stat?c=problem_statement&pm=1585&rd=6535 import java.u ...

  3. Android 在AlertDialog里添加布局控件

    android里很多时候需要在弹出的AlertDialog里有自己的控件,填写信息,比如弹出一个登陆对话框 那么首先你就要创建这么一个布局的inputphonenum.xml文件了 <?xml ...

  4. 查看wtmp文件内容

    1./var/log/wtmp文件的作用     /var/log/wtmp也是一个二进制文件,记录每个用户的登录次数和持续时间等信息!   2.查看方法:可以用last命令输出当中内容 1 2 3 ...

  5. amaze UI的使用

    1.放置在独立的位置 2.引入核心css与js <link href="{sh::PUB}amaze-ui/css/amazeui.min.css" rel="st ...

  6. Hadoop中的各种排序

    本篇博客是金子在学习hadoop过程中的笔记的整理,不论看别人写的怎么好,还是自己边学边做笔记最好了. 1:shuffle阶段的排序(部分排序) shuffle阶段的排序可以理解成两部分,一个是对sp ...

  7. Google Chrome中的高性能网络(二)

    Chrome Predictor的预测功能优化 Chrome会随着使用变得更快. 它这个特性是通过一个单例对象Predictor来实现的.这个对象在浏览器内核进程(Browser Kernel Pro ...

  8. LoadRunner脚本优化之—参数化迭代介

    在LoadRunner的脚本优化时,有时发送给服务器的请求参数化时,服务器返回的内容也会和参数化的内容相对应,例如发送的请求带有查询key=123,则服务器也会返回含有123相关的内容.这时我们在使用 ...

  9. Git分支管理的基本操作

    首先从远端版本库clone下来一个全新的库: git clone username@xxx:/xxx/xxx.git 此时clone下来的,只是master分支,没有其他分支. 查看分支: git b ...

  10. 【原创】Hadoop机架感知对性能调优的理解

    Hadoop作为大数据处理的典型平台,在海量数据处理过程中,其主要限制因素是节点之间的数据传输速率.因为集群的带宽有限,而有限的带宽资源却承担着大量的刚性带宽需求,例如Shuffle阶段的数据传输不可 ...