cncjs

1
const path = require('path');
2
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
3
const dotenv = require('dotenv');
4
const HtmlWebpackPlugin = require('html-webpack-plugin');
5
const without = require('lodash/without');
6
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
7
const nib = require('nib');
8
const stylusLoader = require('stylus-loader');
9
const webpack = require('webpack');
10
const ManifestPlugin = require('webpack-manifest-plugin');
11
const WriteFileWebpackPlugin = require('write-file-webpack-plugin');
12
const babelConfig = require('./babel.config');
13
const buildConfig = require('./build.config');
14
const pkg = require('./src/package.json');
15

16
dotenv.config();
17

18
const publicPath = process.env.PUBLIC_PATH || '';
19
const buildVersion = pkg.version;
20
const timestamp = new Date().getTime();
21

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