Webpack入门——使用Webpack打包Angular项目的一个例子
来源:互联网 发布:手机防吸费软件 编辑:程序博客网 时间:2024/05/29 07:47
(一)什么是Webpack
Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github.io/,一进入官网可以看到下面这张大图:
这张图基本上解释了webpack是用来干嘛的,将一些相互依赖的模块(文件),打包成一个或多个js文件,减少http请求次数,提升性能。这些相互依赖的模块可以是图片、字体、coffee文件、样式文件、less文件等。
具体怎么用呢?接下来我将用一个例子来说明:
(二)一个Webpack+Angular的例子
1.先看下目录结构
2.安装Webpack及其他组件
安装Webpack之前建议先安装Node.js,然后采用npm的方式来安装Webpack:
npm install webpack -g
因为要用到angular,所以要安装angular:
npm install angular
还要安装一系列加载器(loader):
npm install style-loader css-loader url-loader sass-loader raw-loader
注意:除了webpack是全局安装之外,其他组件都是安装在app文件夹下面,会自动生成node_modules文件夹。
3.配置文件webpack.config.js
1 module.exports = { 2 context: __dirname + '/app',//上下文 3 entry: './index.js',//入口文件 4 output: {//输出文件 5 path: __dirname + '/app', 6 filename: './bundle.js' 7 }, 8 module: { 9 loaders: [//加载器10 {test: /\.html$/, loader: 'raw'},11 {test: /\.css$/, loader: 'style!css'},12 {test: /\.scss$/, loader: 'style!css!sass'},13 {test: /\.(png|jpg|ttf)$/, loader: 'url?limit=8192'}14 ]15 }16 };
4.入口文件index.js
1 var angular = require('angular');//引入angular2 var ngModule = angular.module('app',[]);//定义一个angular模块3 require('./directives/hello-world/hello-world.js')(ngModule);//引入指令(directive)文件4 require('./css/style.css');//引入样式文件
require用于引入外部模块(可以是对象,可以是函数,可以是css样式,可以是html页面等)
5.主页面index.html
1 <!DOCTYPE html> 2 <html ng-app="app"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Angular with Webpack</title> 6 </head> 7 <body> 8 <h1>Angular + Webpack</h1> 9 <hello-world></hello-world>10 <script src="bundle.js"></script>11 </body>12 </html>
可以看到主页面是非常干净清爽的,只引入了一个输出文件bundle.js,然后html标签里加了ng-app="app"。
6.指令文件hello-world.js
1 module.exports = function(ngModule) { 2 ngModule.directive('helloWorld', helloWorldFn);//定义指令,对应页面中的<hello-world></hello-world> 3 require('./hello-world.scss'); 4 function helloWorldFn() { 5 return { 6 restrict: 'E',//元素(element) 7 scope: {}, 8 template: require('./hello-world.html'),//模板 9 //templateUrl: 'directives/hello-world/hello-world.html',10 controllerAs: 'vm',// <=> $scope.vm = {greeting: '你好,我是卡哥'}11 controller: function () {12 var vm = this;13 vm.greeting = '你好,我是卡哥,很高兴见到你';14 }15 }16 }17 }
module.exports用于将模块(文件)作为一个接口(一般是一个函数)暴露给外部。
7.其他文件(style.css、hello-world.html、hello-world.scss)
1 @font-face{ 2 font-family: 'maozedong'; 3 src: url(../fonts/maozedong.ttf); 4 } 5 body{ 6 background: url(../images/longmao.jpg) yellowgreen; 7 font-size: 24pt; 8 color: #fff; 9 font-family: 'maozedong';10 }
1 <div class="hello-world">2 {{vm.greeting}}3 </div>
1 .hello-world {2 color: red;3 border: 1px solid green;4 }
8.编译和运行
在命令行工具中输入:webpack,即可编译,这时我们会遇到第一个坑:
这个错误的关键行在"You may need an appropriate loader to handle the file type",大概意思就是你的加载器(loader)不正确,可是我们明明安装上了所有的加载器啊,也在配置文件中引用了呀,我在网上找了很久都没找到问题所在,后来还是一位细心的同事帮我解决这个问题的,原来问题出在配置文件中的"module"下的"loader"应该是"loaders",就因为少了一个"s",浪费我一上午的时间。
修改过来之后,编译通过了,我们在浏览器中打开主页面index.html,这时遇到了第二个坑:
大概意思是你跨域了,不能加载hello-world.html这个文件,问题出在指令文件hello-world.js中的引用模板地址的代码:
templateUrl: 'directives/hello-world/hello-world.html'
在网上搜到一个解决办法,就是使用Node.js自带的的http-server,以下是server.js的代码:
1 var port = 8000,2 express = require('express'),3 app = express();4 app.use('/', express.static(__dirname));5 app.listen(port);6 console.log('Now serving http://localhost:' + port + '/index.html');
使用之前要先安装express:npm install express,然后在命令行工具中输入node server.js开启服务,这时在浏览器中输入:localhost:8000/index.html即可访问主页面。
另外一个方法是用require的方式引入hello-world.html:
template: require('./hello-world.html')
(三)补充
(1)编译的命令"webpack"后面可以加参数,如:
"webpack -p"表示对打包后的文件进行压缩
"webpack -w"表示实时进行打包更新
"webpack -d"表示提供source map,方便调试
(2)webpack-dev-server可以提供实时监视文件变化的功能,使用之前先安装webpack-dev-server:
npm install webpack-dev-server -g
然后在命令行中输入:webpack-dev-server --progress --colors,显示以下结果:
这时在浏览器中输入:localhost:8080(localhost:8080/webpack-dev-server),你对静态资源的任何改动都会直接反映到主页面中。
---------------------------------------------------------------------------- 华丽的分割线 ----------------------------------------------------------------------------
总结:这是一个Webpack+Angular的典型例子,包含了最基本的打包js文件、css文件、scss文件、图片、字体的方法。通过这几天对Webpack的学习,发现有关Webpack的资料确实是非常少的,百度百科和维基百科上甚至都没有这个词条。希望这篇文章可以帮助大家入门。
转载:http://www.cnblogs.com/kagol/archive/2016/01/23/5152734.html
- Webpack入门——使用Webpack打包Angular项目的一个例子
- Webpack入门——使用Webpack打包Angular项目的一个例子
- (二)webpack入门——webpack的使用
- 工具学习——webpack 项目打包
- webpack入门(二)——webpack使用
- webpack入门(二)——webpack使用
- webpack打包工具的使用
- (一)webpack入门——webpack的安装
- (三)webpack入门——webpack功能集合的demo
- 教你如何使用webpack打包你的项目
- webpack打包react项目
- webpack打包项目
- 如何使用webpack打包vue项目?
- webpack 入门例子
- 使用webpack打包编写一个vue插件
- 使用webpack进行打包
- vue+webpack项目中px2rem的例子
- 1.vue项目例子——webpack安装
- Android系统证书platform.x509.pem,platform.pk8转换为.keystore文件
- Android Studio中两个让初学者崩溃菜单
- (DT系列六)devicetree中数据和 struct device有什么关系
- 软件工程学习总结(1)——软件测试工具详解
- c语言sizeof()在32位及64位系统的区别
- Webpack入门——使用Webpack打包Angular项目的一个例子
- Java多线程之Lock的使用
- Swift3 - Result of call '***' is unused
- ceph异步消息类图
- Mysql处理海量数据时的一些优化查询速度方法
- 一个三流学校程序员的奋斗
- 获取当前系统语言环境
- Mysql 备份恢复备份和恢复类型
- RxJava 和 RxAndroid 四(RxBinding的使用)