摘要:前端构建最近很热,用构建,,的文章很多,但是构建的文章找来找去也没有一篇让我感觉到很满意的,好多都运行报错,所以我参考了几篇文章,写一篇前端构建的文章指南。安装先装好和,因为是一个基于的项目。大神勿喷,感谢手下留情
webpack前端构建angular1.0
Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也没有一篇让我感觉到很满意的,好多都运行报错,所以我参考了几篇文章,写一篇webpack前端构建angular1.0的文章指南。本文适合第一次接触webpack的朋友,如果是老鸟,就不用看了。
安装
先装好node和npm,因为webpack是一个基于node的项目。然后查看node是否安装成功:
node -v && npm -v
全局安装webpack
npm install -g webpack
查看webpack是否安装成功:
npm -v
webpack中文社区:
https://doc.webpack-china.org/
建一个文件夹,然后新建一个package.json的文件在项目根目录下
mkdir webpackAngular
cd webpackAngular
npm init
现在项目里面就有一个package.json, 我们多加一点东西,慢慢丰富它的内容。
添加index.html文件
webpackAngular webpack + Angular
添加webpack.config.js文件,添加了最重要的webpack的配置文件,我们还是从非常简单的hello world开始玩起,webpack原生直接支持AMD和CommonJS两种格式,如果你想使用ES6的风格,这点以后再提。
webpack.config.js
var webpack = require("webpack"); var path = require("path"); var OpenBrowserPlugin = require("open-browser-webpack-plugin"); module.exports = { //上下文 context: __dirname + "/app", //入口文件 entry: "./app.js", //输出文件 output: { path: __dirname + "/build", filename: "[name].js" }, module: { loaders: [ { test: /.css$/, loader: ["style-loader", "css-loader"] } ] }, //自动启动浏览器 plugins: [ new OpenBrowserPlugin({ url: "http://localhost:8080" }) ] };
添加app.js
//引入angular var angular = require("angular"); //定义一个angular模块 var ngModule = angular.module("app",[]); //引入指令文件 require("./helloWorld/helloWorld.js")(ngModule); //引入样式文件 require("./css/style.css");
添加style.css
.ing{ height: 48px; position: relative; top:30%; left: 40%; background-image:url("/app/images/loader.gif"); background-repeat: no-repeat; font-size: 24px; color: #000; } .hello-world { color: red; border: 1px solid green; }
添加helloWorld.html
添加helloWorld.js
module.exports = function(ngModule) { //定义指令,对应页面中的ngModule.directive("helloWorld", helloWorldFn); function helloWorldFn() { return { //元素(element) restrict: "E", scope: {}, templateUrl: "/app/helloWorld/helloWorld.html", controllerAs: "vm", controller: function () { var vm = this; console.log("this",this); vm.greeting = "你好,我是Alan,很高兴见到你!"; } } } }
安装依赖文件
sudo npm isntall angular --save-dev
sudo npm isntall css-loader --save-dev
sudo npm isntall style-loade --save-dev
sudo npm isntall express --save-dev
sudo npm isntall open-browser-webpack-plugin --save-dev
sudo npm isntall webpack --save-dev
sudo npm isntall webpack-dev-server --save-dev
自动保存package.json文件,如果直接复制package.json文件执行下面命令:
sudo npm install
sudo npm run build
会自动生成buid文件夹压缩js文件
sudo npm run dev
也可以在浏览器直接访问:
http://localhost:8080/
最后恭喜你用webpack构建angular1.0成功了!!!
如果有什么疑问欢迎留言。。。
大神勿喷,感谢手下留情~~~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86978.html
摘要:我是这一期的主持人黄子毅本期精读的文章是。模块化需要保证全局变量尽量干净,目前为止的模块化方案都没有很好的做到这一点。精读本次提出独到观点的同学有流形,黄子毅,苏里约,,杨森,淡苍,留影,精读由此归纳。 这次是前端精读期刊与大家第一次正式碰面,我们每周会精读并分析若干篇精品好文,试图讨论出结论性观点。没错,我们试图通过观点的碰撞,争做无主观精品好文的意见领袖。 我是这一期的主持人 ——...
摘要:感受构建工具给前端优化工作带来的便利。多多益处逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题构建工具层出不穷。其实工具都能满足需求,关键是看怎么用,工具的使用背后是对前端性能优化的理解程度。 这篇主要介绍一下我在玩Webpack过程中的心得。通过实例介绍WebPack的安装,插件使用及加载策略。感受构建工具给前端优化工作带来的便利。 showImg(https://se...
摘要:历史上由于是作为的替代品出现,当时要解决的问题是处理浏览器兼容问题,打包或,做一些公共资源替换,雪碧图等,最后可以顺带合并到一个文件,但模块化功能远远比弱,基本上只能合并,但不能理解模块概念。 1 引言 说到前端编译方案,也就是如何打包项目,如何编译组件,可选方案有很多,比如: 通过 webpack / parcel / gulp 构建项目。 通过 parcel / gulp / b...
阅读 1516·2023-04-26 02:08
阅读 3106·2021-10-14 09:42
阅读 7050·2021-09-22 15:34
阅读 3218·2019-08-30 13:16
阅读 2693·2019-08-26 13:49
阅读 1325·2019-08-26 11:59
阅读 1227·2019-08-26 10:31
阅读 2125·2019-08-23 17:19