1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var process$1 = require('process');
|
8 | var path = require('path');
|
9 | var webpack = _interopDefault(require('webpack'));
|
10 | var webpackBundleAnalyzer = require('webpack-bundle-analyzer');
|
11 | var UglifyJSPlugin = _interopDefault(require('uglifyjs-webpack-plugin'));
|
12 | var fs = require('fs');
|
13 |
|
14 | const makePath = filePath => path.join(process$1.cwd(), filePath);
|
15 |
|
16 |
|
17 | const src = makePath('src');
|
18 | const entry = makePath('src/assets/js/index.js');
|
19 | const styles = makePath('src/assets/cssModules/css.json');
|
20 | const output = makePath('dist/assets/js');
|
21 |
|
22 | const userConfig = makePath('scripts.config.js');
|
23 |
|
24 | const banner = `
|
25 | ▄█ █▄ ▄████████ ▄████████ ███▄▄▄▄ ▄█ ███▄▄▄▄ ▄██████▄
|
26 | ███ ███ ███ ███ ███ ███ ███▀▀▀██▄ ███ ███▀▀▀██▄ ███ ███
|
27 | ███ ███ ███ ███ ███ ███ ███ ███ ███▌ ███ ███ ███ █▀
|
28 | ███ ███ ███ ███ ▄███▄▄▄▄██▀ ███ ███ ███▌ ███ ███ ▄███
|
29 | ███ ███ ▀███████████ ▀▀███▀▀▀▀▀ ███ ███ ███▌ ███ ███ ▀▀███ ████▄
|
30 | ███ ███ ███ ███ ▀███████████ ███ ███ ███ ███ ███ ███ ███
|
31 | ███ ▄█▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
|
32 | ▀███▀███▀ ███ █▀ ███ ███ ▀█ █▀ █▀ ▀█ █▀ ████████▀
|
33 | ███ ███
|
34 |
|
35 | Don't edit this file directly. Edit with Webpack.
|
36 | Then after you're done run npm run build
|
37 |
|
38 | Scaffolded with @pixel2html/scripts-frontend
|
39 | `;
|
40 |
|
41 | const common = [
|
42 |
|
43 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
44 |
|
45 | new webpack.BannerPlugin(banner)
|
46 | ];
|
47 |
|
48 | const debugPlugins = [
|
49 | new webpackBundleAnalyzer.BundleAnalyzerPlugin()
|
50 | ];
|
51 |
|
52 | const developmentPlugins = [
|
53 | ];
|
54 |
|
55 | const productionPlugins = [
|
56 | new UglifyJSPlugin({sourceMap: true}),
|
57 | ];
|
58 |
|
59 | const isProd = () => process.env.NODE_ENV === 'production';
|
60 | const isDebug = () => process.env.DEBUG_MODE === 'true';
|
61 |
|
62 | const checkDebug = () =>
|
63 | isProd() || isDebug();
|
64 |
|
65 | const getPlugins = () => {
|
66 | const shouldBeDebugMode = checkDebug();
|
67 |
|
68 | let plugins = [ ...common ];
|
69 |
|
70 | if (!shouldBeDebugMode) plugins = [...plugins, ...developmentPlugins];
|
71 | if (shouldBeDebugMode) plugins = [...plugins, ...productionPlugins];
|
72 | if (isDebug()) plugins = [...plugins, ...debugPlugins];
|
73 |
|
74 | return plugins
|
75 | };
|
76 |
|
77 | const modules = {
|
78 | rules: [
|
79 | {
|
80 | test: /\.(js|jsx|mjs)$/,
|
81 | enforce: 'pre',
|
82 | use: [
|
83 | {
|
84 | options: {
|
85 | eslintPath: require.resolve('eslint'),
|
86 | baseConfig: {
|
87 | extends: [require.resolve('@pixel2html/eslint-config')]
|
88 | },
|
89 | ignore: false,
|
90 | useEslintrc: false
|
91 | },
|
92 | loader: require.resolve('eslint-loader')
|
93 | }
|
94 | ],
|
95 | include: src
|
96 | },
|
97 | {
|
98 | oneOf: [
|
99 |
|
100 | {
|
101 | test: /\.(js|jsx|mjs)$/,
|
102 | include: src,
|
103 | exclude: [/[/\\\\]node_modules[/\\\\]/],
|
104 | use: {
|
105 | loader: 'babel-loader',
|
106 | options: {
|
107 | babelrc: false,
|
108 | presets: [require.resolve('@pixel2html/babel-preset')],
|
109 | compact: true,
|
110 | highlightCode: true,
|
111 | }
|
112 | }
|
113 | },
|
114 |
|
115 | {
|
116 | test: /\.js$/,
|
117 | use: {
|
118 | loader: 'babel-loader',
|
119 | options: {
|
120 | babelrc: false,
|
121 | compact: false,
|
122 | presets: [require.resolve('@pixel2html/babel-preset/dependencies')],
|
123 | cacheDirectory: true,
|
124 | highlightCode: true,
|
125 | }
|
126 | }
|
127 | }
|
128 | ]
|
129 | }
|
130 | ]};
|
131 |
|
132 | const getConfig = () => {
|
133 | const shouldBeDebugMode = checkDebug();
|
134 |
|
135 | const config = {
|
136 | entry: {
|
137 | main: entry
|
138 | },
|
139 | output: {
|
140 | filename: '[name].js',
|
141 | chunkFilename: '[name].chunk.js',
|
142 | path: output,
|
143 | publicPath: '/'
|
144 | },
|
145 |
|
146 | module: modules,
|
147 | plugins: getPlugins(),
|
148 | devtool: shouldBeDebugMode
|
149 | ? 'hidden-source-map'
|
150 | : 'eval-source-map',
|
151 |
|
152 |
|
153 | node: {
|
154 | dgram: 'empty',
|
155 | fs: 'empty',
|
156 | net: 'empty',
|
157 | tls: 'empty',
|
158 | child_process: 'empty'
|
159 | },
|
160 | resolve: {
|
161 | alias: {
|
162 | styles: styles
|
163 | }
|
164 | },
|
165 | bail: shouldBeDebugMode,
|
166 | mode: shouldBeDebugMode ? 'production' : 'development',
|
167 | performance: {
|
168 | hints: shouldBeDebugMode ? 'warning' : false
|
169 | },
|
170 | };
|
171 |
|
172 | return config
|
173 | };
|
174 |
|
175 | const setEnv = mode => {
|
176 | process.env.NODE_ENV = mode;
|
177 | process.env.BABEL_ENV = mode;
|
178 | };
|
179 |
|
180 | const setDebug = mode => {
|
181 | process.env.DEBUG_MODE = mode;
|
182 | };
|
183 |
|
184 | const compileJS = mode => {
|
185 | const isDebug = mode === 'debug';
|
186 | setDebug(isDebug);
|
187 |
|
188 | if (mode === 'production' || isDebug) {
|
189 | setEnv('production');
|
190 | } else {
|
191 | setEnv('development');
|
192 | }
|
193 |
|
194 | const defaultConfig = getConfig();
|
195 |
|
196 | const customConfig = fs.existsSync(userConfig);
|
197 |
|
198 | const config = customConfig
|
199 |
|
200 | ? require(userConfig)(defaultConfig, webpack)
|
201 | : defaultConfig;
|
202 | return new Promise(resolve =>
|
203 | webpack(config, (err, stats) => {
|
204 | if (err) console.log('Webpack', err);
|
205 | console.log(stats.toString({
|
206 | chunks: false,
|
207 | colors: true
|
208 | }));
|
209 | resolve();
|
210 | })
|
211 | )
|
212 | };
|
213 |
|
214 | const commonPlugins = [
|
215 |
|
216 | new webpack.NamedModulesPlugin(),
|
217 |
|
218 | new webpack.ProvidePlugin({
|
219 | $: 'jquery',
|
220 | jQuery: 'jquery',
|
221 | 'window.jQuery': 'jquery'
|
222 | }),
|
223 |
|
224 |
|
225 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
226 |
|
227 | new webpack.BannerPlugin(banner)
|
228 | ];
|
229 |
|
230 | const productionPlugins$1 = [
|
231 | new webpack.DefinePlugin({
|
232 | 'process.env': {
|
233 | NODE_ENV: JSON.stringify('production')
|
234 | }
|
235 | }),
|
236 |
|
237 | new webpack.optimize.ModuleConcatenationPlugin(),
|
238 | new UglifyJSPlugin({sourceMap: true}),
|
239 | new webpack.optimize.ModuleConcatenationPlugin(),
|
240 | new webpack.NoEmitOnErrorsPlugin()
|
241 | ];
|
242 |
|
243 | const getPlugins$1 = () => {
|
244 | const shouldBeDebugMode = checkDebug();
|
245 |
|
246 | let plugins = [ ...commonPlugins ];
|
247 |
|
248 | if (shouldBeDebugMode) plugins = [...plugins, ...productionPlugins$1];
|
249 | if (isDebug()) plugins = [...plugins, ...debugPlugins];
|
250 |
|
251 | return plugins
|
252 | };
|
253 |
|
254 | const makePath$1 = filePath => path.join(process$1.cwd(), filePath);
|
255 |
|
256 | const createShopifyConfig = config => {
|
257 | config.entry.main = makePath$1('src/scripts');
|
258 |
|
259 | config.output = {
|
260 |
|
261 |
|
262 | filename: '[name].js',
|
263 | chunkFilename: '[name].chunk.[chunkhash:5].js',
|
264 | path: makePath$1('.deploy/assets')
|
265 | };
|
266 |
|
267 | config.plugins = getPlugins$1();
|
268 |
|
269 |
|
270 | config.mode = 'none';
|
271 |
|
272 |
|
273 |
|
274 | config.externals = {
|
275 | jquery: 'jQuery'
|
276 | };
|
277 |
|
278 | return config
|
279 | };
|
280 |
|
281 | exports.getShopifyPlugins = getPlugins$1;
|
282 | exports.createShopifyConfig = createShopifyConfig;
|
283 | exports.compiler = compileJS;
|