Webpack Server Start
🐦 webpack-based 【development server】 && 【build】 && 【prodcution server】
安装
npm install webpack-server-start --save--dev
development server
1. 业务入口配置
entries.demo.js
// 可配置多个入口var entries = 'index': entry: './src/app.js' template: dev: './dev.html' prod: './prod.html' 'index2': entry: './src/app2.js' template: dev: './dev.html' prod: './prod.html'
2. webpack配置
webpack.config.dev.js
moduleexports = // entry: '', here is useless, entry will be replace by 入口配置的entry output: publicPathForDevServer: '/dev/' // /dev will be as the development root path extraPath: 'image': './image' // this can be use '../image/xxx.png' // ... // other webpack common config...
3. 开发服务器启动
var webpackConfig = ;var entries = ;var devServer = devServer; /** * @param * @param * @param * @param */;
build
1. 入口配置
与 dev server entires 相同规则
2. webpack配置
webpack.config.prod.js
var path = ;moduleexports = // entry: '', here is useless, entry will be replace by 入口配置的entry output: // for production path: path publicPath: '/dist/' extraPath: 'image': './image' // this can be use '../image/xxx.png' // ... // other webpack common config...
3. build 开始
var webpackConfig = ;var entries = ;var build = build; /** * @param * @param */;
production server
启动构建后的项目
var prodServer = prodServer; /** * @param * @param * @param */;
补充说明
需 build 的 html 模版文件可以增加 buildTime
防止浏览器缓存。例如:
关于上文中提到的 bird 代理中间件, 可参考 bird 使用文档 。