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 call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vue中appear的用法
2017/08/17 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
C#笔试题集合
2013/06/21 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
优质服务活动实施方案
2014/05/02 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
vue 实现上传组件
2021/05/31 Vue.js