Webpack

yarn add @ddot/ddot-plugin-webpack -D

run

$ 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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="icon" href="/favicon.png" type="image/x-icon">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

options

export default {
  plugins: [
    [
      'webpack',{...},
    ],
  ],
};

title

modify document.title for html-webpack-plugin

such as:

title: 'DDot App',

outFileName

Configure the build outFileName

such as:

outFileName: 'assets/[name].[contenthash]',

outputPath

Configure the build outputPath

such as:

outputPath: './dist',

chainWebpack

Extend or modify the webpack configuration via the API of [webpack-chain](https://github.com/neutrinojs/webpack-chain) obj

such as:

chainWebpack(config) {
  config
    .entry('index')
    .add('./src/index')
    .end();
},

tsImportOption

add options for ts-import-plugin

such as:

tsImportOption: [
  {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  },
],

proxy

Configure the 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:

  proxy: {
    '/todos/1': {
       target: 'http://jsonplaceholder.typicode.com/',
    },
  },

alias

Configure the resolve.alias property of webpack.

such as:

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:

define: {
  "process.env.TEST": 1,
},

PreviousExtends

Last updated 7 years ago

Was this helpful?