webpack前端構建angular1.0！！！

時間 2019-12-04

標籤 webpack 前端構建 angular1.0 angular 欄目 AngularJS 简体版

原文原文鏈接

webpack前端構建angular1.0

Webpack最近很熱，用webapcak構建react，vue，angular2.0的文章不少，可是webpack構建angualr1.0的文章找來找去也沒有一篇讓我感受到很滿意的，好多都運行報錯，因此我參考了幾篇文章，寫一篇webpack前端構建angular1.0的文章指南。本文適合第一次接觸webpack的朋友，若是是老鳥，就不用看了。css

安裝

先裝好node和npm，由於webpack是一個基於node的項目。而後查看node是否安裝成功：html

node -v && npm -v前端
全局安裝webpack
npm install -g webpack
查看webpack是否安裝成功：
npm -vvue
webpack中文社區：
https://doc.webpack-china.org/node

創建項目

建一個文件夾，而後新建一個package.json的文件在項目根目錄下react

mkdir webpackAngular
cd webpackAngular
npm initwebpack

項目結構

如今項目裏面就有一個package.json，咱們多加一點東西，慢慢豐富它的內容。web

添加index.html文件express

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
  <meta charset="UTF-8">
  <title>webpackAngular</title>
</head>
<body>
  <h1>webpack + Angular </h1>
  <hello-world></hello-world>
  <script src="/build/main.js"></script>
</body>
</html>

添加webpack.config.js文件，添加了最重要的webpack的配置文件，咱們仍是從很是簡單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式，若是你想使用ES6的風格，這點之後再提。npm

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

<div class="ing"></div>
<div class="hello-world">
    <span ng-bind="vm.greeting"></span>
</div>

添加helloWorld.js

module.exports = function(ngModule) {
  //定義指令，對應頁面中的<hello-world></hello-world>
  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