初学Angular+webpack+bootstrap

首先需要npm install
url-loader file-loader css-loader style-loader

script.js代码如下:

require('./js/angular.js');
require('./js/angular-router.js');
require('bootstrap');
require('font-awesome');

var scotchApp = angular.module('scotchApp', ['ui.router']);



// create the controller and inject Angular's $scope

scotchApp.controller('mainController', function($scope) {



    // create a message to display in our view

    $scope.message = 'Everyone come and see how good I look!';

});


scotchApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('about',{
            url:"/about",
            templateUrl:'pages/about.html',
            controller:'mainController'
        })
        .state('home',{
            url:"/home",
            templateUrl:'pages/home.html',
            controller:'contactController'
        })
        .state('contact',{
            url:"/contact",
            templateUrl:'pages/contact.html',
            controller:'contactController'
        });


    $urlRouterProvider.otherwise('/about');

    $urlRouterProvider.when('',"/about");

});


scotchApp.controller('mainController', function($scope) {

    // create a message to display in our view

    $scope.message = 'Everyone come and see how good I look!';

});



scotchApp.controller('aboutController', function($scope) {

    $scope.message = 'Look! I am an about page.';

});



scotchApp.controller('contactController', function($scope) {

    $scope.message = 'Contact us! JK. This is just a demo.';

});

webpack.config.js:

/**
 * Created by zhaohuan on 2017/4/27.
 */
var webpack=require('webpack');
module.exports={
    entry:__dirname+'/script.js',
    output:{
     path:__dirname+'/dist',
     filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            {
                test: /\.html$/,
                use: "html-loader"
            },
            { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
              use: 'url-loader?limit=50000&name=[path][name].[ext]'}//当css中出现引入背景图片等url：需要配置url-loader
        ]

    },
    resolve:{
      alias:{ //通过配置，在script.js require时引入key值即可
          'font-awesome':'./css/font-awesome.css',
          'bootstrap':'./css/bootstrap.css'
      }
    },
    plugins: [
   //如果需要用到以来jq的第三方库需要配置，当用到时将$,jquery暴露出来
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
};