成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack前端構(gòu)建angular1.0?。?！

Leck1e / 513人閱讀

摘要：前端構(gòu)建最近很熱，用構(gòu)建，，的文章很多，但是構(gòu)建的文章找來(lái)找去也沒(méi)有一篇讓我感覺(jué)到很滿意的，好多都運(yùn)行報(bào)錯(cuò)，所以我參考了幾篇文章，寫一篇前端構(gòu)建的文章指南。安裝先裝好和，因?yàn)槭且粋€(gè)基于的項(xiàng)目。大神勿噴，感謝手下留情

webpack前端構(gòu)建angular1.0

Webpack最近很熱，用webapcak構(gòu)建react，vue，angular2.0的文章很多，但是webpack構(gòu)建angualr1.0的文章找來(lái)找去也沒(méi)有一篇讓我感覺(jué)到很滿意的，好多都運(yùn)行報(bào)錯(cuò)，所以我參考了幾篇文章，寫一篇webpack前端構(gòu)建angular1.0的文章指南。本文適合第一次接觸webpack的朋友，如果是老鳥，就不用看了。

安裝

先裝好node和npm，因?yàn)閣ebpack是一個(gè)基于node的項(xiàng)目。然后查看node是否安裝成功：

node -v && npm -v

全局安裝webpack
npm install -g webpack
查看webpack是否安裝成功：
npm -v

webpack中文社區(qū)：
https://doc.webpack-china.org/

建立項(xiàng)目

建一個(gè)文件夾，然后新建一個(gè)package.json的文件在項(xiàng)目根目錄下

mkdir webpackAngular
cd webpackAngular
npm init

項(xiàng)目結(jié)構(gòu)

現(xiàn)在項(xiàng)目里面就有一個(gè)package.json， 我們多加一點(diǎn)東西，慢慢豐富它的內(nèi)容。

添加index.html文件




  
  webpackAngular


  
webpack + Angular

添加webpack.config.js文件，添加了最重要的webpack的配置文件，我們還是從非常簡(jiǎn)單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式，如果你想使用ES6的風(fēng)格，這點(diǎn)以后再提。

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"]
      }
    ]
  },

  //自動(dòng)啟動(dòng)瀏覽器
  plugins: [
    new OpenBrowserPlugin({ url: "http://localhost:8080" })
  ]
};

添加app.js

//引入angular
var angular = require("angular");
//定義一個(gè)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) {
  //定義指令，對(duì)應(yīng)頁(yè)面中的
  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，很高興見(jiàn)到你!";
      }
    }
  }
}

安裝依賴文件

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

自動(dòng)保存package.json文件，如果直接復(fù)制package.json文件執(zhí)行下面命令：
sudo npm install

webpack編譯文件

sudo npm run build

會(huì)自動(dòng)生成buid文件夾壓縮js文件

webpack自動(dòng)啟動(dòng)瀏覽器訪問(wèn)idnex.html

sudo npm run dev

也可以在瀏覽器直接訪問(wèn)：
http://localhost:8080/

見(jiàn)證奇跡的時(shí)候到了，然后神奇的發(fā)現(xiàn)：

最后恭喜你用webpack構(gòu)建angular1.0成功了！?。?br>如果有什么疑問(wèn)歡迎留言。。。
大神勿噴，感謝手下留情~~~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86978.html

相關(guān)文章

  • 前端技術(shù)學(xué)習(xí)線路

    摘要：前端工具構(gòu)建工具編譯工具包管理工具前端類庫(kù)和框架類庫(kù)框架框架框架設(shè)計(jì)風(fēng)格扁平化語(yǔ)言相關(guān)預(yù)處理器模塊化規(guī)范測(cè)試響應(yīng)式方案百分比和編輯器和移動(dòng)開發(fā)微信開發(fā)相關(guān)框架優(yōu)秀第三方包數(shù)據(jù)庫(kù) 1. 前端 1.1 工具 1.1.1 構(gòu)建工具 webpack 1.1.2 編譯工具 babel browserify ... 1.1.3 包管理工具 npm 1.2 前端類庫(kù)和框架 1.2.1 類庫(kù) j...

    blair 評(píng)論0 收藏0

  • 精讀《js 模塊化發(fā)展》

    摘要：我是這一期的主持人黃子毅本期精讀的文章是。模塊化需要保證全局變量盡量干凈，目前為止的模塊化方案都沒(méi)有很好的做到這一點(diǎn)。精讀本次提出獨(dú)到觀點(diǎn)的同學(xué)有流形，黃子毅，蘇里約，，楊森，淡蒼，留影，精讀由此歸納。 這次是前端精讀期刊與大家第一次正式碰面，我們每周會(huì)精讀并分析若干篇精品好文，試圖討論出結(jié)論性觀點(diǎn)。沒(méi)錯(cuò)，我們?cè)噲D通過(guò)觀點(diǎn)的碰撞，爭(zhēng)做無(wú)主觀精品好文的意見(jiàn)領(lǐng)袖。 我是這一期的主持人 ——...

    Freelander 評(píng)論0 收藏0

  • 【前端構(gòu)建】WebPack實(shí)例與前端性能優(yōu)化

    摘要：感受構(gòu)建工具給前端優(yōu)化工作帶來(lái)的便利。多多益處邏輯清晰，程序注重?cái)?shù)據(jù)與表現(xiàn)分離，可讀性強(qiáng)，利于規(guī)避和排查問(wèn)題構(gòu)建工具層出不窮。其實(shí)工具都能滿足需求，關(guān)鍵是看怎么用，工具的使用背后是對(duì)前端性能優(yōu)化的理解程度。 這篇主要介紹一下我在玩Webpack過(guò)程中的心得。通過(guò)實(shí)例介紹WebPack的安裝，插件使用及加載策略。感受構(gòu)建工具給前端優(yōu)化工作帶來(lái)的便利。 showImg(https://se...

    QiShare 評(píng)論0 收藏0

  • 精讀《如何編譯前端項(xiàng)目與組件》

    摘要：歷史上由于是作為的替代品出現(xiàn)，當(dāng)時(shí)要解決的問(wèn)題是處理瀏覽器兼容問(wèn)題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個(gè)文件，但模塊化功能遠(yuǎn)遠(yuǎn)比弱，基本上只能合并，但不能理解模塊概念。 1 引言 說(shuō)到前端編譯方案，也就是如何打包項(xiàng)目，如何編譯組件，可選方案有很多，比如： 通過(guò) webpack / parcel / gulp 構(gòu)建項(xiàng)目。 通過(guò) parcel / gulp / b...

    jiekechoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<