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进行拖拽
Jul 20 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
vue实现密码显示隐藏切换功能
Feb 23 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
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
js tab 选项卡
2009/04/26 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
js实现简单页面全屏
2019/09/17 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python正规则表达式学习指南
2016/08/02 Python
Python中的pack和unpack的使用
2018/03/12 Python
浅述python2与python3的简单区别
2018/09/19 Python
Python程序控制语句用法实例分析
2020/01/14 Python
结束运行python的方法
2020/06/16 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
实习教师个人的自我评价
2013/11/08 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
学生评语集锦
2015/01/04 职场文书
春秋淹城导游词
2015/02/11 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏