angular + bootstrap
翟缪文
安装依赖包
#安装webpack
npm install webpack -g
#自动生成一个package.json文件
npm init
#将webpack增加到package.json文件中
npm install webpack --save-dev
#如果想要安装开发工具
npm install webpack-dev-server --save-devnpm 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');//引入angular
const ngModule = angular.module('app',[]);//定义一个angular模块
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');
/* lodash is required for the next line to work */
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就是你想要的东西了。
webpack-dev-server --progress --colors整合express
修改angular-cli.json
"outDir":"express/public/"打包angular
ng build --prod进入express目录
npm start参考
类似资料：