安装依赖包
#安装webpack
npm install webpack -g
#自动生成一个package.json文件
npm init
#将webpack增加到package.json文件中
npm install webpack --save-dev
#如果想要安装开发工具
npm install webpack-dev-server --save-dev
npm install angular --save
npm install babel-core babel-loader babel-preset-env --save
npm install jquery bootstrap@3 expose-loader --save
npm install url-loader style-loader css-loader --save
编辑app/index.js
const angular = require('angular');
const ngModule = angular.module('app',[]);
const _ = require('lodash');
const $ = require("jquery");
require ("bootstrap/dist/css/bootstrap.css");
require ("bootstrap/dist/js/bootstrap.js");
function component () {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello','webpack'],' ');
return element;
}
document.body.appendChild(component());
编辑page.html
<html ng-app> <head> </head> <body> <script src="dist/bundle.js"></script> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> </body> </html>
也可以直接在html中引入
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
编辑webpack.config.js
const path = require('path');
module.exports = {
entry: './app/index.js',output: {
filename: 'bundle.js',path: path.resolve(__dirname,'dist')
},module: {
rules: [
{
test: /.js$/,exclude: /(node_modules|bower_components)/,use: {
loader: 'babel-loader',options: {
presets: ['env']
}
}
},{
test: require.resolve('jquery'),use: [{
loader: 'expose-loader',options: 'jQuery'
},{
loader: 'expose-loader',options: '$'
}]
},{ test: /.css$/,loader: 'style-loader!css-loader' },{ test: /.eot(?v=d+.d+.d+)?$/,loader: "file-loader" },{ test: /.(woff|woff2)$/,loader:"url-loader?prefix=font/&limit=5000" },{ test: /.ttf(?v=d+.d+.d+)?$/,loader: "url-loader?limit=10000&mimetype=application/octet-stream" },{ test: /.svg(?v=d+.d+.d+)?$/,loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
]
}
}
webpack会自动分析依赖，然后编译，这样bundle.js就是你想要的东西了。
-- -- --
整合express
修改angular-cli.json
"outDir":"express/public/"
打包angular
--
进入express目录
npm start
参考
expose-loader
Webpack + Angular的组件化实践
