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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
详解JavaScript 作用域
Jul 14 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代码收集表单内容并写入文件的代码
2012/01/29 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python如何让类支持比较运算
2018/03/20 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
触摸春天教学反思
2014/02/03 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
行政介绍信范文
2015/05/04 职场文书
2015年教师国培感言
2015/08/01 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
详解在OpenCV中如何使用图像像素
2022/03/03 Python