国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Leck1e / 512人閱讀

摘要：前端構(gòu)建最近很熱，用構(gòu)建，，的文章很多，但是構(gòu)建的文章找來找去也沒有一篇讓我感覺到很滿意的，好多都運行報錯，所以我參考了幾篇文章，寫一篇前端構(gòu)建的文章指南。安裝先裝好和，因為是一個基于的項目。大神勿噴，感謝手下留情

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

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

安裝

先裝好node和npm，因為webpack是一個基于node的項目。然后查看node是否安裝成功：

node -v && npm -v

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

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

建立項目

建一個文件夾，然后新建一個package.json的文件在項目根目錄下

mkdir webpackAngular
cd webpackAngular
npm init

項目結(jié)構(gòu)

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

添加index.html文件




  
  webpackAngular


  
webpack + Angular

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

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) {
  //定義指令，對應(yīng)頁面中的
  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文件，如果直接復(fù)制package.json文件執(zhí)行下面命令：
sudo npm install

webpack編譯文件

sudo npm run build

會自動生成buid文件夾壓縮js文件

webpack自動啟動瀏覽器訪問idnex.html

sudo npm run dev

也可以在瀏覽器直接訪問：
http://localhost:8080/

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86978.html

相關(guān)文章

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

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

    blair 評論0 收藏0

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

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

    Freelander 評論0 收藏0

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

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

    QiShare 評論0 收藏0

  • 精讀《如何編譯前端項目與組件》

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

    jiekechoo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<