webpack + angularjs 的开发环境配置

原料

平台：windows，
命令行git bash 工具
工具：
npm
webpack
less , less-loader,css-loader, style-loader
ui-router, oclazyload

安装插件

1、安装npm工具对插件进行管理
windows中，需要下载 nodejs , nodejs中自带npm，所以安装好
nodejs 后，npm就安装完毕
2、安装webpack并初始化
进入 gitbash

cd /d
mkdir bigdata && cd bigdata
npm init -y
npm install --save-dev webpack 

3、安装插件
接着上面步骤：

 npm install --save-dev less  less-loader css-loader style-loader 

4、安装angularjs的组件

npm install --save-dev  angularjs angular-ui-router oclazyload 

5、安装完成后如图

Paste_Image.png

建立网页进行测试

建立主页面 index.html

建立 index.js

  'use strict';
    import './app.less';
    angular = require('angular');

 var app = angular.module("app", [
     require('angular-ui-router'),
      require('oclazyload')
    ]) 
    .config(["$stateProvider", "$urlRouterProvider",
       function ($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/app");
      $stateProvider
        .state("app", { 
          url: "/app",
          templateUrl: "html/app.html"
        })
    }
          ])
      .controller("appCtrl",function($scope){
        $scope.names = [1,2,3,4,5,6,7,8,9];
      })

建立 app.less

 @size:800px;
 .app-light{
    background:red;
    margin:auto;
    width: @size;
 }

建立html的文件夹，再在里面建立app.html的文件

建立配置文件 webpack.config.js

var path = require('path'); 
module.exports = {
entry: './index.js',
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [{
        test: /\.less$/,
        use: [{
            loader: "style-loader"  // creates style nodes from JS strings
        }, {
            loader: "css-loader"    // translates CSS into CommonJS
        }, {
            loader: "less-loader"   // compiles Less to CSS
        }]
    }]
}
};

建立文件完毕

6、编译运行文件

进入git bash 中，cd 到 bigdata的文件夹中

输入命令

webpack

运行文件夹下面的index.html
运行效果

Paste_Image.png