rogerioromao.dev
The repo for Purrform's main BigCommerce store.
1const BundleAnalyzerPlugin =
2 require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
3const { CleanWebpackPlugin } = require('clean-webpack-plugin');
4const LodashPlugin = require('lodash-webpack-plugin');
5const path = require('path');
6const webpack = require('webpack');
7
8// Common configuration, with extensions in webpack.dev.js and webpack.prod.js.
9module.exports = {
10 bail: true,
11 context: __dirname,
12 entry: {
13 main: './assets/js/app.js',
14 head_async: ['lazysizes'],
15 font: './assets/js/theme/common/font.js',
16 polyfills: './assets/js/polyfills.js',
17 },
18 module: {
19 rules: [
20 {
21 test: /\.js$/,
22 include: /(assets\/js|assets\\js|stencil-utils)/,
23 use: {
24 loader: 'babel-loader',
25 options: {
26 plugins: [
27 '@babel/plugin-syntax-dynamic-import', // add support for dynamic imports (used in app.js)
28 'lodash', // Tree-shake lodash
29 ],
30 presets: [
31 [
32 '@babel/preset-env',
33 {
34 loose: true, // Enable "loose" transformations for any plugins in this preset that allow them
35 modules: false, // Don't transform modules; needed for tree-shaking
36 useBuiltIns: 'entry',
37 corejs: '^3.6.5',
38 },
39 ],
40 ],
41 },
42 },
43 },
44 {
45 test: require.resolve('jquery'),
46 loader: 'expose-loader',
47 options: {
48 exposes: ['$'],
49 },
50 },
51 ],
52 },
53 output: {
54 chunkFilename: 'theme-bundle.chunk.[name].js',
55 filename: 'theme-bundle.[name].js',
56 path: path.resolve(__dirname, 'assets/dist'),
57 },
58 performance: {
59 hints: 'warning',
60 maxAssetSize: 1024 * 300,
61 maxEntrypointSize: 1024 * 300,
62 },
63 plugins: [
64 new CleanWebpackPlugin({
65 cleanOnceBeforeBuildPatterns: ['assets/dist'],
66 verbose: false,
67 watch: false,
68 }),
69 new LodashPlugin(), // Complements babel-plugin-lodash by shrinking its cherry-picked builds further.
70 new webpack.ProvidePlugin({
71 // Provide jquery automatically without explicit import
72 $: 'jquery',
73 jQuery: 'jquery',
74 'window.jQuery': 'jquery',
75 }),
76 new BundleAnalyzerPlugin({
77 analyzerMode: 'static',
78 openAnalyzer: false,
79 }),
80 ],
81 resolve: {
82 fallback: { url: require.resolve('url/') },
83 alias: {
84 jquery: path.resolve(
85 __dirname,
86 'node_modules/jquery/dist/jquery.min.js',
87 ),
88 jstree: path.resolve(
89 __dirname,
90 'node_modules/jstree/dist/jstree.min.js',
91 ),
92 lazysizes: path.resolve(
93 __dirname,
94 'node_modules/lazysizes/lazysizes.min.js',
95 ),
96 'slick-carousel': path.resolve(
97 __dirname,
98 'node_modules/slick-carousel/slick/slick.min.js',
99 ),
100 'svg-injector': path.resolve(
101 __dirname,
102 'node_modules/svg-injector/dist/svg-injector.min.js',
103 ),
104 },
105 },
106};