cncjs

1
const crypto = require('crypto');
2
const path = require('path');
3
const boolean = require('boolean');
4
const dotenv = require('dotenv');
5
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
6
const findImports = require('find-imports');
7
const HtmlWebpackPlugin = require('html-webpack-plugin');
8
const without = require('lodash/without');
9
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
10
const nib = require('nib');
11
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
12
const stylusLoader = require('stylus-loader');
13
const TerserPlugin = require('terser-webpack-plugin');
14
const webpack = require('webpack');
15
const ManifestPlugin = require('webpack-manifest-plugin');
16
const babelConfig = require('./babel.config');
17
const buildConfig = require('./build.config');
18
const pkg = require('./src/package.json');
19

20
dotenv.config({
21
  path: path.resolve('webpack.config.app.production.env')
22
});
23

24
const USE_ESLINT_LOADER = boolean(process.env.USE_ESLINT_LOADER);
25
const USE_TERSER_PLUGIN = boolean(process.env.USE_TERSER_PLUGIN);
26
const USE_OPTIMIZE_CSS_ASSETS_PLUGIN = boolean(process.env.USE_OPTIMIZE_CSS_ASSETS_PLUGIN);
27

28
// Use publicPath for production
29
const publicPath = ((payload) => {
30
  const algorithm = 'sha1';
31
  const buf = String(payload);
32
  const hash = crypto.createHash(algorithm).update(buf).digest('hex');
33
  return '/' + hash.substr(0, 8) + '/'; // 8 digits
34
})(pkg.version);
35
const buildVersion = pkg.version;
36
const timestamp = new Date().getTime();
37

38
module.exports = {
39
  mode: 'production',
40
  cache: true,
41
  target: 'web',
42
  context: path.resolve(__dirname, 'src/app'),
43
  devtool: 'cheap-module-source-map',
44
  entry: {
45
    polyfill: [
46
      path.resolve(__dirname, 'src/app/polyfill/index.js')
47
    ],
48
    vendor: findImports([
49
      'src/app/**/*.{js,jsx}',
50
      '!src/app/polyfill/**/*.js',
51
      '!src/app/**/*.development.js'
52
    ], { flatten: true }),
53
    app: [
54
      path.resolve(__dirname, 'src/app/index.jsx')
55
    ]
56
  },
57
  output: {
58
    path: path.resolve(__dirname, 'dist/cncjs/app'),
59
    chunkFilename: `[name].[chunkhash].bundle.js?_=${timestamp}`,
60
    filename: `[name].[chunkhash].bundle.js?_=${timestamp}`,
61
    publicPath: publicPath
62
  },
63
  module: {
64
    rules: [
65
      USE_ESLINT_LOADER && {
66
        test: /\.jsx?$/,
67
        loader: 'eslint-loader',
68
        enforce: 'pre',
69
        exclude: /node_modules/
70
      },
71
      {
72
        test: /\.jsx?$/,
73
        loader: 'babel-loader',
74
        options: babelConfig,
75
        exclude: /node_modules/
76
      },
77
      {
78
        test: /\.styl$/,
79
        use: [
80
          MiniCssExtractPlugin.loader,
81
          {
82
            loader: 'css-loader',
83
            options: {
84
              modules: true,
85
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
86
              camelCase: true,
87
              importLoaders: 1,
88
            }
89
          },
90
          'stylus-loader'
91
        ],
92
        exclude: [
93
          path.resolve(__dirname, 'src/app/styles')
94
        ]
95
      },
96
      {
97
        test: /\.styl$/,
98
        use: [
99
          MiniCssExtractPlugin.loader,
100
          {
101
            loader: 'css-loader',
102
            options: {
103
              modules: false,
104
              camelCase: true,
105
            }
106
          },
107
          'stylus-loader'
108
        ],
109
        include: [
110
          path.resolve(__dirname, 'src/app/styles')
111
        ]
112
      },
113
      {
114
        test: /\.css$/,
115
        use: [
116
          'style-loader',
117
          'css-loader'
118
        ]
119
      },
120
      {
121
        test: /\.(png|jpg|svg)$/,
122
        loader: 'url-loader',
123
        options: {
124
          limit: 8192
125
        }
126
      },
127
      {
128
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
129
        loader: 'url-loader',
130
        options: {
131
          limit: 10000,
132
          mimetype: 'application/font-woff'
133
        }
134
      },
135
      {
136
        test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
137
        loader: 'file-loader'
138
      }
139
    ].filter(Boolean)
140
  },
141
  node: {
142
    fs: 'empty',
143
    net: 'empty',
144
    tls: 'empty'
145
  },
146
  optimization: {
147
    minimizer: [
148
      USE_TERSER_PLUGIN && (
149
        new TerserPlugin()
150
      ),
151
      USE_OPTIMIZE_CSS_ASSETS_PLUGIN && (
152
        new OptimizeCSSAssetsPlugin()
153
      ),
154
    ].filter(Boolean)
155
  },
156
  plugins: [
157
    new webpack.DefinePlugin({
158
      'process.env': {
159
        NODE_ENV: JSON.stringify('production'),
160
        BUILD_VERSION: JSON.stringify(buildVersion),
161
        LANGUAGES: JSON.stringify(buildConfig.languages),
162
        TRACKING_ID: JSON.stringify(buildConfig.analytics.trackingId)
163
      }
164
    }),
165
    new stylusLoader.OptionsPlugin({
166
      default: {
167
        // nib - CSS3 extensions for Stylus
168
        use: [nib()],
169
        // no need to have a '@import "nib"' in the stylesheet
170
        import: ['~nib/lib/nib/index.styl']
171
      }
172
    }),
173
    new webpack.ContextReplacementPlugin(
174
      /moment[\/\\]locale$/,
175
      new RegExp('^\./(' + without(buildConfig.languages, 'en').join('|') + ')$')
176
    ),
177
    // Generates a manifest.json file in your root output directory with a mapping of all source file names to their corresponding output file.
178
    new ManifestPlugin({
179
      fileName: 'manifest.json'
180
    }),
181
    new MiniCssExtractPlugin({
182
      filename: `[name].css?_=${timestamp}`,
183
      chunkFilename: `[id].css?_=${timestamp}`
184
    }),
185
    new CSSSplitWebpackPlugin({
186
      size: 4000,
187
      imports: '[name].[ext]?[hash]',
188
      filename: '[name]-[part].[ext]?[hash]',
189
      preserve: false
190
    }),
191
    new HtmlWebpackPlugin({
192
      filename: 'index.hbs',
193
      template: path.resolve(__dirname, 'index.hbs'),
194
      chunksSortMode: 'dependency' // Sort chunks by dependency
195
    })
196
  ],
197
  resolve: {
198
    modules: [
199
      path.resolve(__dirname, 'src'),
200
      'node_modules'
201
    ],
202
    extensions: ['.js', '.jsx']
203
  }
204
};
205