webpack前端構建angular1.0！！！

Leck1e 發布于2019-08-21 11:40 / 506人閱讀

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

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

webpack編譯文件

sudo npm run build

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

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

sudo npm run dev

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

見證奇跡的時候到了，然后神奇的發現：

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

云服務器 GPU云服務器前端構建 webpack _webpack webpack cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86978.html

前端技術學習線路

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

blair 2019-08-22 10:39 評論0 收藏0
精讀《js 模塊化發展》

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

Freelander 2019-08-22 17:00 評論0 收藏0
【前端構建】WebPack實例與前端性能優化

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

QiShare 2019-08-19 17:48 評論0 收藏0
精讀《如何編譯前端項目與組件》

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

jiekechoo 2019-08-23 14:52 評論0 收藏0