安装依赖包

#安装webpack@H_404_5@
npm install webpack -g
#自动生成一个package.json文件@H_404_5@
npm init
#将webpack增加到package.json文件中@H_404_5@
npm install webpack --save-dev
#如果想要安装开发工具@H_404_5@
npm install webpack-dev-server --save-dev

npm install angular --@H_404_5@save
npm install babel-core@H_404_5@ babel-loader@H_404_5@ babel-preset@H_404_5@-env@H_404_5@ --@H_404_5@save
npm install jquery bootstrap@3@H_404_5@ expose-loader@H_404_5@ --@H_404_5@save
npm install url-loader@H_404_5@ style-loader@H_404_5@ css-loader@H_404_5@ --@H_404_5@save

编辑app/index.js

const@H_404_5@ angular = require@H_404_5@('angular'@H_404_5@);//引入angular@H_404_5@
const@H_404_5@ ngModule = angular.module('app'@H_404_5@,[]);//定义一个angular模块@H_404_5@
const@H_404_5@ _ = require@H_404_5@('lodash'@H_404_5@);
const@H_404_5@ $ = require@H_404_5@("jquery"@H_404_5@);
require@H_404_5@ ("bootstrap/dist/css/bootstrap.css"@H_404_5@);
require@H_404_5@ ("bootstrap/dist/js/bootstrap.js"@H_404_5@);
function@H_404_5@ component@H_404_5@ ()@H_404_5@ {@H_404_5@
  var@H_404_5@ element = document.createElement('div'@H_404_5@);

  /* lodash is required for the next line to work */@H_404_5@
  element.innerHTML = _.join(['Hello'@H_404_5@,'webpack'@H_404_5@],' '@H_404_5@);

  return@H_404_5@ element;
}

document.body.appendChild(component());

编辑page.html

<html@H_404_5@ ng-app@H_404_5@>@H_404_5@ <head@H_404_5@>@H_404_5@ </head@H_404_5@>@H_404_5@ <body@H_404_5@>@H_404_5@ <script@H_404_5@ src@H_404_5@="dist/bundle.js"@H_404_5@>@H_404_5@@H_404_5@</script@H_404_5@>@H_404_5@ Your name: <input@H_404_5@ type@H_404_5@="text"@H_404_5@ ng-model@H_404_5@="yourname"@H_404_5@ placeholder@H_404_5@="World"@H_404_5@>@H_404_5@ <hr@H_404_5@>@H_404_5@ Hello @H_404_5@{{yourname@H_404_5@ || 'World@H_404_5@'}}@H_404_5@! <div@H_404_5@ class@H_404_5@="input-group"@H_404_5@>@H_404_5@ <span@H_404_5@ class@H_404_5@="input-group-addon"@H_404_5@ id@H_404_5@="basic-addon1"@H_404_5@>@H_404_5@@</span@H_404_5@>@H_404_5@ <input@H_404_5@ type@H_404_5@="text"@H_404_5@ class@H_404_5@="form-control"@H_404_5@ placeholder@H_404_5@="Username"@H_404_5@ aria-describedby@H_404_5@="basic-addon1"@H_404_5@>@H_404_5@ </div@H_404_5@>@H_404_5@ </body@H_404_5@>@H_404_5@ </html@H_404_5@>@H_404_5@@H_404_5@

也可以直接在html中引入

<script@H_404_5@ type@H_404_5@="text/javascript"@H_404_5@ src@H_404_5@="node_modules/jquery/dist/jquery.js"@H_404_5@>@H_404_5@@H_404_5@</script@H_404_5@>@H_404_5@
<link@H_404_5@ rel@H_404_5@="stylesheet"@H_404_5@ href@H_404_5@="node_modules/bootstrap/dist/css/bootstrap.css"@H_404_5@>@H_404_5@
<script@H_404_5@ type@H_404_5@="text/javascript"@H_404_5@ src@H_404_5@="node_modules/bootstrap/dist/js/bootstrap.js"@H_404_5@>@H_404_5@@H_404_5@</script@H_404_5@>@H_404_5@

编辑webpack.config.js

const@H_404_5@ path = require@H_404_5@('path'@H_404_5@);

module@H_404_5@.exports@H_404_5@ = {
  entry@H_404_5@: './app/index.js'@H_404_5@,output@H_404_5@: {
    filename@H_404_5@: 'bundle.js'@H_404_5@,path@H_404_5@: path.resolve(__dirname,'dist'@H_404_5@)
  },module@H_404_5@: {
    rules@H_404_5@: [
    {
      test@H_404_5@: /\.js$/@H_404_5@,exclude@H_404_5@: /(node_modules|bower_components)/@H_404_5@,use@H_404_5@: {
        loader@H_404_5@: 'babel-loader'@H_404_5@,options@H_404_5@: {
          presets@H_404_5@: ['env'@H_404_5@]
        }
      }
    },{
          test@H_404_5@: require@H_404_5@.resolve('jquery'@H_404_5@),use@H_404_5@: [{
              loader@H_404_5@: 'expose-loader'@H_404_5@,options@H_404_5@: 'jQuery'@H_404_5@
          },{
              loader@H_404_5@: 'expose-loader'@H_404_5@,options@H_404_5@: '$'@H_404_5@
          }]
    },{ test@H_404_5@: /\.css$/@H_404_5@,loader@H_404_5@: 'style-loader!css-loader'@H_404_5@ },{ test@H_404_5@: /\.eot(\?v=\d+\.\d+\.\d+)?$/@H_404_5@,loader@H_404_5@: "file-loader"@H_404_5@ },{ test@H_404_5@: /\.(woff|woff2)$/@H_404_5@,loader@H_404_5@:"url-loader?prefix=font/&limit=5000"@H_404_5@ },{ test@H_404_5@: /\.ttf(\?v=\d+\.\d+\.\d+)?$/@H_404_5@,loader@H_404_5@: "url-loader?limit=10000&mimetype=application/octet-stream"@H_404_5@ },{ test@H_404_5@: /\.svg(\?v=\d+\.\d+\.\d+)?$/@H_404_5@,loader@H_404_5@: "url-loader?limit=10000&mimetype=image/svg+xml"@H_404_5@ }
  ]
  }
}

webpack会自动分析依赖，然后编译，这样bundle.js就是你想要的东西了。

webpack@H_404_5@-@H_404_5@dev@H_404_5@-@H_404_5@server@H_404_5@ -@H_404_5@-@H_404_5@progress@H_404_5@ -@H_404_5@-@H_404_5@colors@H_404_5@

整合express

修改angular-cli.json

"outDir"@H_404_5@:"express/public/"@H_404_5@

打包angular

ng@H_404_5@ build@H_404_5@ -@H_404_5@-@H_404_5@prod@H_404_5@

进入express目录

npm start@H_404_5@@H_404_5@

参考

expose-loader
Webpack + Angular的组件化实践