安装依赖包
#安装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');//引入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>
@H_502_227@也可以直接在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" }
]
}
}
@H_502_227@webpack会自动分析依赖，然后编译，这样bundle.js就是你想要的东西了。
webpack-dev-server --progress --colors
整合express
@H_502_227@修改angular-cli.json
"outDir":"express/public/"
@H_502_227@打包angular
ng build --prod
@H_502_227@进入express目录
npm start
参考
@H_502_227@expose-loaderWebpack + Angular的组件化实践