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 文件的同步加载与异步加载实现原理
Dec 13 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
Vue实现购物车功能
Apr 27 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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 的 __FILE__ 常量
2007/01/15 PHP
php仿ZOL分页类代码
2008/10/02 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
制作特殊字的脚本
2006/06/26 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
python字符串连接方法分析
2016/04/12 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
pip命令无法使用的解决方法
2018/06/12 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python如何输出百分比
2020/07/31 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
物业消防安全责任书
2014/07/23 职场文书
教书育人演讲稿
2014/09/11 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
python基础之类属性和实例属性
2021/10/24 Python