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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
简单学习vue指令directive
Nov 03 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
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下载文件的详解
2013/06/02 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
javascript 继承实现方法
2009/08/26 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python贪吃蛇游戏代码
2020/04/18 Python
python中嵌套函数的实操步骤
2019/02/27 Python
在python中做正态性检验示例
2019/12/09 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
心理健康教育制度
2014/01/27 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
离婚上诉状范文
2015/05/23 职场文书
男生贾里读书笔记
2015/06/30 职场文书
学校体育节班级口号
2015/12/25 职场文书
优质服务标语口号
2015/12/26 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Linux中sftp常用命令整理
2022/06/28 Servers