docs/webpack.config.js at master · lorikeetui/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
const webpack = require('webpack')
const fs = require('fs')
const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackMonitor = require('webpack-monitor')

const PRODUCTION = process.env.NODE_ENV === 'production'
const PUBLIC_PATH = (PRODUCTION ? 'https://docs.lorikeet.design/' : 'http://localhost:8080/')
console.log("P",PUBLIC_PATH);
const BASE_HTML_CONF = {
  template: './public/index.html',
}

const pages = fs.readdirSync(path.join(__dirname, 'src/pages')).map(filename =>
  filename
    .replace(/\.js$/, '')
    .replace(/^Page/, '')
    .replace(/(.)([A-Z])/g, '$1-$2')
    .toLowerCase()
)

const htmlPages = () => {
  return pages.map(
    page =>
      new HtmlWebpackPlugin(
        Object.assign({}, BASE_HTML_CONF, { filename: `${page}/index.html` })
      )
  )
}

module.exports = {
  entry: [path.resolve(__dirname, 'src/index.js')],
  devtool: PRODUCTION ? 'source-map' : 'eval',
  devServer: {
    contentBase: [path.join(__dirname, '../dist'), path.join(__dirname, 'public')],
    historyApiFallback: true,
  },
  resolve: {
    alias: {
      pages: path.resolve(__dirname, 'src/pages'),
      comps: path.resolve(__dirname, 'src/components'),
      src: path.resolve(__dirname, 'src'),
      'ui-components': path.resolve(__dirname, '/src/ui-components'),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          plugins: [
            ["babel-plugin-styled-components", {
              "displayName": !PRODUCTION,
            }],
          ],
        },
      },
      {
        test: /\.(png|jpg|gif|svg|woff|woff2)$/,
        use: [
          {
            loader: 'url-loader',
            options: { limit: 8192 },
          },
        ],
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
  plugins: (() => {
    let plugins = [
      new CleanWebpackPlugin(['dist']),
      // new webpack.DefinePlugin({
      //   PUBLIC_PATH: JSON.stringify(PUBLIC_PATH),
      // }),
      new HtmlWebpackPlugin(BASE_HTML_CONF),
      new webpack.DefinePlugin({
        ARAGON_UI_PATH: JSON.stringify(PRODUCTION ? '/aragon-ui/' : '/'),
      }),
    ]

    if (PRODUCTION) {
      plugins = plugins
        .concat([
          new UglifyJsPlugin({
            sourceMap: true,
            parallel: true,
          }),
          new CompressionPlugin(),
          new WebpackMonitor({ launch: !!process.env.INSPECT_BUNDLE }),
        ])
        .concat(htmlPages())
    }
    return plugins
  })(),
  output: {
    publicPath: PUBLIC_PATH,
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}