Angular 1.6项目从Grunt+Bower迁移至Webpack的方案咨询

Hey there! Let's break down migrating your Angular 1.6 app from Grunt/Bower to Webpack step by step, focusing exactly on the pain points you mentioned. I’ve done this a few times, so I’ll share practical, actionable steps.

1. Ditch Bower First (Before Webpack Setup) #

Since Webpack works natively with npm, we’ll move all your Bower dependencies to npm:

• Delete your bower.json and bower_components folder.
• For each package in your old Bower setup, install the equivalent npm package (most popular packages are on npm with the same name, e.g., angular instead of bower:angular). Run commands like:

  npm install angular angular-ui-router --save
  

• Update any hardcoded paths in your app (like template URLs or CSS imports) from bower_components/ to node_modules/—or better yet, let Webpack resolve them automatically (more on that later).

2. Webpack Core Configuration: Entry Point #

Your entry point tells Webpack where your application starts. For Angular 1.6, this is typically your main app module file (e.g., src/app.js). We’ll also split out third-party dependencies into a separate "vendor" bundle for better caching (since these change less often than your app code).

Here’s how to set it up in webpack.config.js:

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js', // Your main app entry file
    vendor: ['angular', 'angular-ui-router'] // List all third-party dependencies here
  },
  // ... rest of config
};

• The app bundle will contain all your custom code.
• The vendor bundle will hold Angular and other libraries, so users’ browsers can cache it independently.

3. Bundle Output Path #

Next, define where Webpack should spit out your built files. We’ll use a dist folder (standard for production builds) and add content hashes to filenames for cache busting (when your code changes, the hash updates, forcing browsers to load the new file).

Add this to your config:

output: {
  path: path.resolve(__dirname, 'dist'), // Absolute path to your output folder
  filename: '[name].[contenthash].js', // [name] = app/vendor, [contenthash] = unique hash per file
  clean: true // Automatically delete old files in dist before building (Webpack 5+)
},

4. Loader Setup (Handling Angular 1.6 Files) #

Loaders tell Webpack how to process non-JS files (like HTML templates, CSS) and transpile modern JS for older browsers. Here’s the essential setup for Angular 1.6:

First, install the required loaders:

npm install --save-dev babel-loader @babel/core @babel/preset-env html-loader css-loader style-loader

Then add the module.rules section to your config:

module: {
  rules: [
    // Transpile JS with Babel (supports older browsers)
    {
      test: /\.js$/,
      exclude: /node_modules/, // Skip third-party code
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'] // Targets modern browsers and falls back for older ones
        }
      }
    },
    // Process Angular HTML templates (converts them to strings Webpack can import)
    {
      test: /\.html$/,
      use: 'html-loader'
    },
    // Process CSS files (injects CSS into the DOM or extracts to a separate file)
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'] // style-loader injects CSS; swap for mini-css-extract-plugin to make a separate CSS bundle
    }
  ]
},

• html-loader: Critical for Angular templates—this lets you use templateUrl in directives/components, or import templates directly into your JS files.
• Babel: Ensures your code works on older browsers that don’t support modern JS features.

5. Fixing index.html: Remove Manual Script Tags & Auto-Inject Bundles #

Forget manually adding script tags to index.html—use the html-webpack-plugin to automatically inject your Webpack bundles (and handle cache busting hashes).

First, install the plugin:

npm install --save-dev html-webpack-plugin

Add it to your config’s plugins section:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... rest of config
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Path to your existing index.html
      filename: 'index.html', // Output filename in dist
      inject: 'body' // Inject bundles at the end of the <body> tag (best practice for Angular)
    })
  ]
};

Now, modify your source index.html:

• Delete all manual <script> tags (including those pointing to bower_components/angular.js, your old app files, etc.).
• Keep your existing HTML structure (like the root <div ng-app="myApp">), but remove all JS/CSS imports.

The plugin will automatically add script tags for your app and vendor bundles to the built dist/index.html.

Quick Migration Checklist #

1. Run npm install for all new dependencies.
2. Test your build with:

   npx webpack --mode development # For local testing (unminified, source maps)
   # OR
   npx webpack --mode production # For production (minified, optimized)
   

3. Open dist/index.html in a browser to verify your app works.

Common Gotcha: Angular Dependency Injection #

If you minify your code (production mode), Angular’s dependency injection will break unless you use one of these fixes:

• Use array syntax for dependency injection:

  angular.module('myApp').controller('MyCtrl', ['$scope', function($scope) { /* ... */ }]);
  

• Install ng-annotate-loader to automatically add injection annotations:

  npm install --save-dev ng-annotate-loader
  

  Then update your JS loader rule:

  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['ng-annotate-loader', 'babel-loader']
  }
  

内容的提问来源于stack exchange，提问作者deba.sharma