Skip to content

Commit 3089dd8

Browse files
justquanyinjustquanyin
committed
feat: 更新文档
1 parent ab841f1 commit 3089dd8

File tree

3 files changed

+112
-159
lines changed

3 files changed

+112
-159
lines changed

‎packages/beidou-webpack/README-ZH.md

+56-78
Original file line numberDiff line numberDiff line change
@@ -134,49 +134,81 @@ module.exports = {
134134
},
135135
};
136136

137-
// 自定义配置3 :
138-
// 更多配置方法，可参看单测用例
137+
```
138+
139+
#### FAQ:
140+
使用配置工厂自定义配置项,操作方式如下例
141+
```js
142+
139143
module.exports = (app, defaultConfig, dev, target) => {
144+
145+
// 从app中获取配置工厂,factory提供的函数下面有列出
140146
const factory = app.webpackFactory;
147+
148+
// 设置 webpack output 的值，方式如下:
141149
factory.set('output',{
142150
{
143151
path: outputPath,
144152
filename: '[name].js?[hash]',
145-
chunkFilename: '[name].modify.js',
153+
chunkFilename: '[name].js',
146154
publicPath: '/build/',
147155
}
148156
})
149-
// 修改默认插件配置
150-
factory.setPlugin('CommonsChunkPlugin',
151-
factory.usePlugin('CommonsChunkPlugin'), // 如不修改，可传null
152-
{
153-
name: 'vendor',
154-
filename: 'manifest.js',
155-
}
156-
);
157+
// webpack output 值修改
158+
factory.get('output').chunkFilename = '[name].modify.js';
157159

160+
161+
// 增加webpack plugin的配置
162+
// 增加了 UglifyJsPlugin 配置，并定义该插件别名为 'UglifyJsPlugin'
158163
factory.addPlugin(
159164
webpack.optimize.UglifyJsPlugin,
160165
{
161166
compress: {
162167
warnings: false,
163168
}
164169
},
165-
'UglifyJsPlugin' , // 可空
170+
'UglifyJsPlugin' , // 可空,默认使用 构建函数名
166171
)
167172

168-
factory.addRule({
169-
test: /\.jsx?$/,
170-
exclude: /node_modules/,
171-
use: {
172-
loader: 'babel-loader',
173-
options: {
174-
babelrc: false,
175-
presets: ['beidou-client'],
176-
},
173+
// 根据别名，修改已配置的webpack plugin
174+
factory.setPlugin(
175+
webpack.optimize.UglifyJsPlugin,
176+
{
177+
compress: {
178+
warnings: true,
179+
}
177180
},
181+
'UglifyJsPlugin'
182+
);
183+
// or 修改方式也可使用如下方式
184+
factory.getPlugin('UglifyJsPlugin').options = {
185+
compress: {
186+
warnings: true,
187+
}
188+
}
189+
190+
// 查找并修改已配置的webpack rule
191+
// 查找满足 .ts 的rule配置，仅且返回一个满足的rule
192+
const ruleObj = factory.getRule('.ts');
193+
ruleObj.options = {
194+
test: /\.tsx?$/,
195+
exclude: /node_modules/,
196+
use: {
197+
loader:
198+
app.webpackFactory.useLoader('babel-loader')/** 如有已定义的loader，则使用自定义loader **/ || 'babel-loader',
199+
options: {
200+
babelrc: false,
201+
presets: ['preset-typescript'],
202+
},
203+
},
204+
}
205+
// 定义loader的方式
206+
app.webpackFactory.defineLoader({
207+
'babel-loader',
208+
require.resolve('babel-loader')
178209
})
179210

211+
// 生成其他环境的webpack配置
180212
const factoryInProd = factory.env('prod');
181213
factoryInProd.addPlugin(new webpack.optimize.UglifyJsPlugin({
182214
compress: {
@@ -185,9 +217,12 @@ module.exports = (app, defaultConfig, dev, target) => {
185217
}))
186218

187219
return factory.getConfig(); // 返回配置
220+
// or 返回 prod 环境的配置
221+
// return factoryInProd.getConfig()
188222

189223
};
190224

225+
191226
```
192227

193228
#### 数据结构：
@@ -213,63 +248,6 @@ class Rule {
213248
}
214249
```
215250

216-
## 配置扩展
217-
218-
##### 自定义 Loader:
219-
```js
220-
app.webpackFactory.defineLoader({
221-
'babel-loader',
222-
require.resolve('babel-loader')
223-
})
224-
```
225-
226-
##### 自定义 Rule:
227-
```js
228-
app.webpackFactory.defineRule({
229-
test: /\.tsx?$/,
230-
exclude: /node_modules/,
231-
use: {
232-
loader: app.webpackFactory.useLoader('babel-loader'), //使用自定义loader
233-
options: {
234-
babelrc: false,
235-
presets: ['preset-typescript'],
236-
},
237-
},
238-
},'tsx')
239-
// 使用自定义Rule增加到webpack项中
240-
app.webpackFactory.addRule(
241-
app.webpackFactory.useRule('tsx')
242-
)
243-
// 获取已配置的Rule
244-
app.webpackFactory.getRule('tsx'); // return Rule Object
245-
```
246-
247-
##### 自定义 Plugin:
248-
```js
249-
app.webpackFactory.definePlugin(webpack.NoEmitOnErrorsPlugin,{},'NoEmitOnErrorsPlugin')
250-
251-
// 使用自定义Plugin增加到webpack项中
252-
app.webpackFactory.addPlugin(
253-
app.webpackFactory.usePlugin('NoEmitOnErrorsPlugin')
254-
)
255-
// 直接增加Plugin到webpack中
256-
//方式1：
257-
app.webpackFactory.addPlugin(webpack.optimize.UglifyJsPlugin, {
258-
compress: {
259-
warnings: false,
260-
},
261-
}, 'UglifyJsPlugin')
262-
// 方式2:
263-
app.webpackFactory.addPlugin(
264-
new webpack.optimize.UglifyJsPlugin({
265-
compress: {
266-
warnings: false,
267-
},
268-
})
269-
)
270-
271-
```
272-
273251
## webpackFactory常用函数说明：
274252

275253
### 重置配置项: reset(value)

‎packages/beidou-webpack/README.md

+55-80
Original file line numberDiff line numberDiff line change
@@ -133,61 +133,94 @@ module.exports = {
133133
hot: true,
134134
},
135135
};
136+
```
137+
138+
#### FAQ:
139+
使用配置工厂自定义配置项,操作方式如下例
140+
```js
136141

137-
// Advanced custom configuration :
138-
// find more example in unittest, please
139142
module.exports = (app, defaultConfig, dev, target) => {
143+
144+
// get the webpack factory
140145
const factory = app.webpackFactory;
146+
147+
// set the value of output in webpack :
141148
factory.set('output',{
142149
{
143150
path: outputPath,
144151
filename: '[name].js?[hash]',
145-
chunkFilename: '[name].modify.js',
152+
chunkFilename: '[name].js',
146153
publicPath: '/build/',
147154
}
148155
})
149-
// set default plugin config
150-
factory.setPlugin('CommonsChunkPlugin',
151-
factory.usePlugin('CommonsChunkPlugin'),
152-
{
153-
name: 'vendor',
154-
filename: 'manifest.js',
155-
}
156-
);
156+
// modify the output value
157+
factory.get('output').chunkFilename = '[name].modify.js';
158+
157159

160+
// add webpack plugin config list
161+
// add UglifyJsPlugin config into plugin of webpack
158162
factory.addPlugin(
159163
webpack.optimize.UglifyJsPlugin,
160164
{
161165
compress: {
162166
warnings: false,
163167
}
164168
},
165-
'UglifyJsPlugin' , // if not pass, use the default value
169+
'UglifyJsPlugin' ,
166170
)
167171

168-
factory.addRule({
169-
test: /\.jsx?$/,
170-
exclude: /node_modules/,
171-
use: {
172-
loader: 'babel-loader',
173-
options: {
174-
babelrc: false,
175-
presets: ['beidou-client'],
176-
},
172+
// modify the UglifyJsPlugin config
173+
factory.setPlugin(
174+
webpack.optimize.UglifyJsPlugin,
175+
{
176+
compress: {
177+
warnings: true,
178+
}
177179
},
180+
'UglifyJsPlugin'
181+
);
182+
// or another method
183+
factory.getPlugin('UglifyJsPlugin').options = {
184+
compress: {
185+
warnings: true,
186+
}
187+
}
188+
189+
// modify the rule of webpack
190+
const ruleObj = factory.getRule('.ts');
191+
ruleObj.options = {
192+
test: /\.tsx?$/,
193+
exclude: /node_modules/,
194+
use: {
195+
loader:
196+
app.webpackFactory.useLoader('babel-loader')/** if had the defined loader，use it **/ || 'babel-loader',
197+
options: {
198+
babelrc: false,
199+
presets: ['preset-typescript'],
200+
},
201+
},
202+
}
203+
// define the loader
204+
app.webpackFactory.defineLoader({
205+
'babel-loader',
206+
require.resolve('babel-loader')
178207
})
179208

209+
// generate prod webpack factory
180210
const factoryInProd = factory.env('prod');
181211
factoryInProd.addPlugin(new webpack.optimize.UglifyJsPlugin({
182212
compress: {
183213
warnings: false,
184214
},
185215
}))
186216

187-
return factory.getConfig(); // return the final config for webpack
217+
return factory.getConfig(); // return webpack config
218+
// or return webpack config for prod
219+
// return factoryInProd.getConfig()
188220

189221
};
190222

223+
191224
```
192225

193226
#### Class Struct
@@ -214,64 +247,6 @@ class Rule {
214247

215248
```
216249

217-
## Webpackfactory
218-
219-
##### Define Custom Loader:
220-
```js
221-
app.webpackFactory.defineLoader({
222-
'babel-loader',
223-
require.resolve('babel-loader')
224-
})
225-
```
226-
227-
##### Define Custom Rule:
228-
```js
229-
app.webpackFactory.defineRule({
230-
test: /\.tsx?$/,
231-
exclude: /node_modules/,
232-
use: {
233-
loader: app.webpackFactory.useLoader('babel-loader'), //used the defined loader.
234-
options: {
235-
babelrc: false,
236-
presets: ['preset-typescript'],
237-
},
238-
},
239-
},'tsx')
240-
//add the rule config to webpack factory
241-
app.webpackFactory.addRule(
242-
app.webpackFactory.useRule('tsx')
243-
)
244-
//add the rule config to webpack factory
245-
app.webpackFactory.getRule('tsx'); // return Rule Object
246-
```
247-
248-
##### Define Custom Plugin:
249-
```js
250-
app.webpackFactory.definePlugin(webpack.NoEmitOnErrorsPlugin,{},'NoEmitOnErrorsPlugin')
251-
252-
// add defined plugin to webpack factory
253-
app.webpackFactory.addPlugin(
254-
app.webpackFactory.usePlugin('NoEmitOnErrorsPlugin')
255-
)
256-
257-
//method 1：
258-
app.webpackFactory.addPlugin(webpack.optimize.UglifyJsPlugin, {
259-
compress: {
260-
warnings: false,
261-
},
262-
}, 'UglifyJsPlugin')
263-
//method 2:
264-
app.webpackFactory.addPlugin(
265-
new webpack.optimize.UglifyJsPlugin({
266-
compress: {
267-
warnings: false,
268-
},
269-
})
270-
)
271-
272-
```
273-
274-
275250
> app.webpackFactory methods list:
276251
277252
### reset(value)

‎packages/beidou-webpack/lib/builder/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

3-
const helper = require('../utils');
43
const webpack = require('webpack');
4+
const helper = require('../utils');
55

66
module.exports = (app, target = 'browser') => {
77
helper.injectPlugin(app);

0 commit comments

Comments
 (0)