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. 解决“重新安装vmware-tools”灰色而无法安装的问题

    前几天重装系统,之后虚拟机需要重新装,装好后要使用vmware-tools实现文件共享,却发现虚拟机那里显示为灰色的,无法安装vmware-tools,在共享文件夹那里设置好共享的文件夹猴也没有用,/ ...

  2. 《深入理解linux内核》第三章 进程

    进程的七种状态 在内核源码的 include/linux/sched.h文件中: task_struct的status可表示 #define TASK_RUNNING 0 #define TASK_I ...

  3. WCF - Creating WCF Service

    http://www.tutorialspoint.com/wcf/wcf_creating_service.htm Creating a WCF service is a simple task u ...

  4. Android开发UI之Fragment-Tabbed Activity的使用

    使用ADT新建的时候,可以选择Tabbed Activity,选择新建一个工程. 新建的工程中,选择不同的Tab页显示不同的内容,主要是通过SectionsPagerAdapter类中的Fragmen ...

  5. C++文件读写总结

    在C++中如何实现文件的读写? 作者: infobillows 发表日期: 2007-04-03 21:33 点击数: 465 一.ASCII 输出 为了使用下面的方法, 你必须包含头文件<fs ...

  6. eclipse 代码中突然出现特殊字符

    在写代码的时候,不知道点到了 eclipse 的哪个属性,代码中就出现了一些特殊字符,也不能删除. 请问,在 eclipse 中该怎么设置,才能将这些字符去掉. 如下图所示: 解决方法: 选择Wind ...

  7. Word对象模型 （.Net Perspective）

    本文主要针对在Visual Studio中使用C# 开发关于Word的应用程序 来源:Understandingthe Word Object Model from a .NET Developer' ...

  8. C#调用C++函数入口点的问题 z

    C++使用 void extern __declspec(dllexport) 函数名()定义的输出函数, 在C#中调用时, 如前文所述, 使用 [DllImport("D:\VS2005P ...

  9. C# 多线程是否结束可通过线程池可以判断

    C# ManualResetEvent信号状态判断线程池是否结束  这是一段重要的代码,小猪两个小时的研究成果,记下来备查. using System; using System.Collection ...

  10. SR4000笔记

    长时间运行情况下需要有降温处理(40度以下) 建议使用触发模式而非连续模式 850nm波长的光(虽然无害,建议不要直视) 12V DC 滤波镜头(允许24个LED激光波长的通过) 快闪:获取数据 慢闪 ...