> For the complete documentation index, see [llms.txt](https://ddot.gitbook.io/cli/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ddot.gitbook.io/cli/extends/webpack.md).
# Webpack
* `yarn add @ddot/ddot-plugin-webpack -D`
## run
```javascript
$ yarn ddot dev // to development project
$ yarn ddot build // to build project
```
## guide
### html template
Create a new `src/pages/document.ejs`, if this file exists, it will be used as the default template
```markup
<%= htmlWebpackPlugin.options.title %>
```
## options
```typescript
export default {
plugins: [
[
'webpack',{...},
],
],
};
```
#### title
modify `document.title` for [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
such as:
```javascript
title: 'DDot App',
```
#### outFileName
Configure the build `outFileName`
such as:
```javascript
outFileName: 'assets/[name].[contenthash]',
```
#### outputPath
Configure the build [outputPath](https://webpack.js.org/configuration/output/#output-path)
such as:
```javascript
outputPath: './dist',
```
#### chainWebpack
Extend or modify the webpack configuration via the API of `[webpack-chain](https://github.com/neutrinojs/webpack-chain)` obj
such as:
```javascript
chainWebpack(config) {
config
.entry('index')
.add('./src/index')
.end();
},
```
#### tsImportOption
add [options](https://github.com/Brooooooklyn/ts-import-plugin#options) for `ts-import-plugin`
such as:
```javascript
tsImportOption: [
{
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
},
],
```
#### proxy
Configure the [proxy](https://github.com/fastify/fastify-http-proxy) property ,If you want to proxy requests to other servers,
* `key` map to `path`
* `key` map to `prefix`
* `target` map to `upstream`
* other property can auto to proxy property
such as:
```javascript
proxy: {
'/todos/1': {
target: 'http://jsonplaceholder.typicode.com/',
},
},
```
#### alias
Configure the resolve.alias property of webpack.
such as:
```javascript
alias: {
config: require('path').join(__dirname, './src/config'),
},
```
#### define
Passed to the code via the webP's DefinePlugin , the value is automatically handled by `JSON.stringify`.
such as:
```javascript
define: {
"process.env.TEST": 1,
},
```