1.0.10 • Published 4 years ago
whistle-webpack v1.0.10
whistle-webpack
安装
yarn add whistle-webpack -D
使用
目录结构
- 单入口文件
src |
|-index.(js|jsx|ts|tsx)
如果想使用 react
,需要自行安装 react
和 react-dom
, 默认支持 react 编译
- 多入口文件
src |
|-index |
|-index.js
|-search|
|-index.js
会自动读取./src/index.(js|jsx|ts|tsx)
或者 ./src/**/index.(js|jsx|ts|tsx)
关于模式
提供三种模式,分别如下:
- build 模式,用于生产环境的打包
- dev-server 模式,用于本地开发
- watch 模式,类似于
webpack --watch
全局安装
npm intall -g whistle-webpack
通过命令行参数指定
// 生产打包
whistle-webpack --mode build
// 或
whistle-webpack
// 本地开发
whistle-webpack --mode dev-server --port 3000
// 默认开发端口是 8080
// 监听模式
whistle-webpack --mode watck
或者文件夹下安装,在 package.json 中添加
"script": {
"build": "whistle-webpack",
"dev": "whistle-webpack --mode dev-server --port 3000",
"watch": "whistle-webpack --mode watck"
}
自己的配置文件
如果想扩展包中包含的三种模式的配置文件,可以这样做
const webpackMerge = require('webpack-merge');
const devConfig = require('whistle-webpack')('development'); // 开发阶段配置
const prodConfig = require('whistle-webpack')('production'); // 生产阶段配置
const watchConfig = require('whistle-webpack')(); // 基础配置
const selfConfig = {
plugins: []
}
module.exports = webpackMerge(/任意模式的配置/, selfConfig);
接下来在命令行中输入
whistle-webpack --config ./self.webpack.config.js