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 相关文章推荐
lib.utf.js
Aug 21 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
如何编写高质量JS代码
Dec 28 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
js数组去重的方法总结
Jan 18 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
Element Badge标记的使用方法
Jul 27 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+mysql写的留言本
2006/10/09 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
教师年终个人自我评价
2013/10/04 职场文书
大学生村官典型材料
2014/01/12 职场文书
大学生社会实践方案
2014/05/11 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Pytorch 实现变量类型转换
2021/05/17 Python
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
实现一个简单得数据响应系统
2021/11/11 Javascript