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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
js 数组操作代码集锦
Apr 28 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
Webpack中雪碧图插件使用详解
May 25 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
javaScript中indexOf用法技巧
Nov 26 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
javaScript基础详解
2017/01/19 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python概率计算器实例分析
2015/03/25 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python初学者常见错误详解
2019/07/02 Python
python3.7 的新特性详解
2019/07/25 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
以下的初始化有什么区别
2013/12/16 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
高中生学习的自我评价
2013/12/14 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
信访工作汇报材料
2014/10/27 职场文书
应急管理工作总结2015
2015/05/04 职场文书
2019年思想汇报
2019/06/20 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA