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

Was this helpful?