织梦搬进webpack之初探angular 1.x

2023-12-14 12:13:17

基于webpack构建的angular1.x 工程（angular篇）

上一篇基于webpack构建的angular 1.x 工程（一）webpack篇里我们已经成功构建了整个项目的打包配置。接下来我们要继续让angular在工程里跑起来。

之前的工程由于是用gulp打包的，具体原理我不太懂，不过貌似会把所有的js自动注入到index.html中。这样做的坏处是当构建好整个项目后，你会发现index.html里面有一大堆的js，想要再加一些依赖会非常的不方便。

后来使用ng-cli构建angular工程，所有依赖的包都被自动添加到了index.html里。另外，打包后的dist目录下也有一大堆文件，有好几十个文件，绝大部分都是angular和第三方js库。虽然说ng-cli很方便，但是ng-cli毕竟是基于webpack的，那么为什么不能手写webpack的配置文件呢？这样做不是可以把控制权全部掌握在自己手里吗？

基于webpack构建的angular1.x工程相比于使用ng-cli构建的工程，最大的区别在于前者需要你自己手动去引入一些angular的js文件。

开启一个新的工程

新建一个目录，取名为ang-webpack。新建一个index.html，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <!-- AngularJS -->
  <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
  <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
  <!-- jQuery -->
  <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <div ng-view></div>
</body>
</html>

新建一个app.js：

(function() {
  'use strict';

  var app = angular.module('app', ['ngRoute']);

  app.config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .otherwise({
        redirectTo: '/home'
      });
  });

  app.controller('HomeController', function($scope) {
    $scope.message = 'Hello World!';
  });
})();

新建一个home.html：

<h1>Home</h1>
<p>{{message}}</p>

新建一个目录views，把home.html放到views目录里。

新建一个package.json：

{
  "name": "ang-webpack",
  "version": "1.0.0",
  "description": "Angular 1.x webpack project",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --open",
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "angular": "^1.8.0",
    "angular-route": "^1.8.0",
    "jquery": "^3.6.0",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

构建webpack.config.js

现在，我们来构建webpack.config.js：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    ]
  }
};