angular+webpack2实战例子


Posted in Javascript onMay 23, 2017

之前研究过webpack但是一直没用过,这次公司要做一个h5网站,正好拿来练练手,话说angular1x对移动端不是很友好,但主要是angular1x比较熟悉,上手快,开发也快,就没去考虑其他前端mvc框架。

好了webpack出了中文版以后,对于我们这些英语不是很好的来说真的是太棒了,话说angularjs啥时候也出个中文文档就更好了,webpack官网:https://doc.webpack-china.org/

右上角可以选择语言。

开始之前先看一下目录文件:

angular+webpack2实战例子

第一步:

首先要使用webpack需要先安装webpack,官网给出了好几中安装方式,就不多说了:

npm install --global webpack

因为我用的是webpack2 所以需要注意版本1x 到 2x 的配置差异,这里官网也给出了详细差异:https://doc.webpack-china.org/guides/migrating/

第二步webapck配置webpack.config.js:

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  entry: './app/app.js',
  output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle-[chunkhash].js',
  publicPath: "/mobile/dist/"
 },
 module: {
  rules: [
  {
    test: /\.(js|jsx)$/, 
    use: 'babel-loader'
  },
 
  {
   test: /\.css$/,
   use: ['style-loader','css-loader']
  },

 {
  test: /\.(png|jpg|jpeg|gif|woff)$/, 
  use: 'url-loader?limit=4192&name=[name].[ext]' 
 },

 ]
},
 plugins:[
  new HtmlWebpackPlugin({        //自动生成Html
    template:'./app/view/index.html',
    filename:'../app/index.html',
    inject:'body'
  })
]
};

module.exports = config;

这里需要说的是entry: './app/app.js' 是入口文件,所有的 js代码都通过入口文件加载,我这里就只用了 app.js ,但是也可以设置多个入口文件。

output: 设置输出的路径和文件,这里我是将所有的 js 压缩到了bundle.js中,这里也是可以设置压缩到多个文件的,文件后面我设置了 hash 值主要考虑浏览器缓存问题,module: 就是配置js css html 打包压缩的规则,这里写法和 webpack1x 有较大差异,还需注意。

plugins: 插件,webpack 有很多内置插件,HtmlWebpackPlugin  是动态生成html的一个内置插件,主要的作用是可以动态的把压缩后带有 hash 值的js动态插入到 html 中。

配置就暂时说到这里,然后再看看我们的入口文件,app.js,

var angular = require('angular');// 引入angular

var urlRouterProvider = require('angular-ui-router');

var uiLoad = require('angular-ui-load');

var $jq = require('jquery');

var animate = require('angular-animate');

var ngModule = angular.module('app',['ui.router','ui.load','ngAnimate']); // 创建app

require('./factory.js')(ngModule,$jq);// 公共方法封装

require('./route.js')(ngModule);// 引入路由文件

require('./directives.js')(ngModule,$jq);// 组件

require('./controller.js')(ngModule);// 控制器

require('./css/style.css');// 引入样式文件

这里主要把js依赖文件引入,然后把angular的路由和逻辑处理的js引入,方便前端模块化编程,注视比较清晰就不多说了。单独的js模块直接按照原来的写就ok了 区别就是在最外层写一个module.exports = function(ngModule){}

项目代码:https://github.com/wangbaogui123/angular-webpack2.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现图片轮播器
May 23 #jQuery
详解用node编写自己的cli工具
May 23 #Javascript
JavaScript 巧学巧用
May 23 #Javascript
JS获取短信验证码倒计时的实现代码
May 22 #Javascript
原生JS实现不断变化的标签
May 22 #Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 #Javascript
You might like
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
浅谈React之状态(State)
2018/09/19 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python操作csv文件实例详解
2017/07/31 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
体育课课后反思
2014/04/24 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
于丹论语心得观后感
2015/06/15 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS