Skip to content

Commit 4213931

Browse files
modestysnmodestysn
committed
add source map support
1 parent 87d6037 commit 4213931

9 files changed

Lines changed: 1700 additions & 888 deletions

File tree

‎package-lock.json‎

Lines changed: 1575 additions & 836 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,22 @@
3030
},
3131
"dependencies": {},
3232
"devDependencies": {
33-
"@babel/core": "^7.6.0",
34-
"@babel/node": "^7.6.1",
35-
"@babel/preset-env": "^7.6.0",
33+
"@babel/core": "^7.6.2",
34+
"@babel/node": "^7.6.2",
35+
"@babel/preset-env": "^7.6.2",
3636
"@babel/preset-react": "^7.0.0",
3737
"babel-loader": "^8.0.6",
38+
"css-loader": "^3.2.0",
3839
"fs-extra": "^8.1.0",
3940
"glob": "^7.1.4",
4041
"mini-css-extract-plugin": "^0.8.0",
42+
"node-sass": "^4.12.0",
4143
"prop-types": "^15.7.2",
4244
"react": "^16.9.0",
4345
"react-dom": "^16.9.0",
44-
"webpack": "^4.40.2",
46+
"sass-loader": "^8.0.0",
47+
"watch": "^1.0.2",
48+
"webpack": "^4.41.0",
4549
"webpack-cli": "^3.3.9",
4650
"webpack-dev-server": "^3.8.1"
4751
},
@@ -50,8 +54,7 @@
5054
"build:asset": "babel-node ./tool/build.asset.js",
5155
"build:page": "babel-node ./tool/build.page.js",
5256
"build:bundle": "babel-node ./tool/build.bundle.js",
53-
"build:watch": "npm run clean:target; npm run build:asset; npm run build:page; npm run watcher;",
54-
"build": "npm run clean-target; npm-run-all --parallel build:asset build:page build:bundle",
57+
"build": "npm run clean:target; npm run build:asset; npm run build:bundle; npm run build:page;",
5558
"build:prod": "webpack --mode production",
5659
"start": "webpack-dev-server --open --mode development"
5760
}

‎src/scripts/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import '../styles/main.scss'; //Yep, that's right. You can import SASS/CSS files
22

33
import {createGAScript} from './client/util/browser.util';
44

5-
window.document.onload = function () {
5+
window.onload = function () {
66
createGAScript();
77
};

‎tool/base.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const SRC_BASE = "/src";
88
const TAR_BASE = "/target";
99
const VENDOR_BASE = "/vendor";
1010

11-
const CSS_BUNDLE_NAME = APP_NAME + "-bundle.css";
12-
const JS_BUNDLE_NAME = APP_NAME + "-bundle.js";
11+
const CSS_BUNDLE_NAME = APP_NAME + "-bundle.min.css";
12+
const JS_BUNDLE_NAME = APP_NAME + "-bundle.min.js";
1313

1414
const Config = {
1515
CUR_VER: pkg.version,

‎tool/build.transform.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,54 @@ import mkdirp from 'mkdirp';
88

99
import Conf from './base.config';
1010

11+
//invalidate cached files to enable auto-recompile then reload
12+
//http://stackoverflow.com/questions/9210542/node-js-require-cache-possible-to-invalidate
13+
/**
14+
* Removes a module from the cache
15+
*/
16+
function purgeCache(moduleName) {
17+
// Traverse the cache looking for the files
18+
// loaded by the specified module name
19+
searchCache(moduleName, function (mod) {
20+
delete require.cache[mod.id];
21+
});
22+
23+
// Remove cached paths to the module.
24+
// Thanks to @bentael for pointing this out.
25+
Object.keys(module.constructor._pathCache).forEach(function(cacheKey) {
26+
if (cacheKey.indexOf(moduleName)>0) {
27+
delete module.constructor._pathCache[cacheKey];
28+
}
29+
});
30+
}
31+
32+
/**
33+
* Traverses the cache to search for all the cached
34+
* files of the specified module name
35+
*/
36+
function searchCache(moduleName, callback) {
37+
// Resolve the module identified by the specified name
38+
var mod = require.resolve(moduleName);
39+
40+
// Check if the module has been resolved and found within
41+
// the cache
42+
if (mod && ((mod = require.cache[mod]) !== undefined)) {
43+
// Recursively go over the results
44+
(function traverse(mod) {
45+
// Go over each of the module's children and
46+
// traverse them
47+
mod.children.forEach(function (child) {
48+
traverse(child);
49+
});
50+
51+
// Call the specified callback providing the
52+
// found cached module
53+
callback(mod);
54+
}(mod));
55+
}
56+
}
57+
//end of invalidate cached files
58+
1159
function outputOnePage(htmlStream, destFolder) {
1260
mkdirp(destFolder, err => {
1361
if (err) {
@@ -50,6 +98,7 @@ function transformOnePage(pageFile, propFile, srcFolder, destFolder) {
5098

5199
const file = path.join(srcFolder, pageFile);
52100
let Component = require(file);
101+
//purgeCache(file);
53102

54103
if (!Component) {
55104
console.log(`✗ Error: No component found at ${file}`);

‎tool/build.watcher.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
'use strict';
2-
31
import fs from 'fs';
42
import path from 'path';
3+
54
import watch from 'watch';
6-
import colors from 'colors';
75

86
import Conf from './base.config';
97
import helper from './base.copier';

‎tool/webpack.config.js‎

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,71 @@
1-
import webpack from 'webpack';
21
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
32

43
import Conf from './base.config';
54

6-
const ENVs = {dev: 'development', prd: 'production', none: 'none'};
5+
const ENVs = {dev: 'development', prd: 'production'};
76

8-
const getPlugins = function(env) {
9-
const GLOBALS = {
10-
'process.env.NODE_ENV': env,
11-
__DEV__: env === ENVs.dev
12-
};
13-
14-
const plugins = [
15-
new webpack.DefinePlugin(GLOBALS),
16-
new MiniCssExtractPlugin(Conf.target.css_bundle),
7+
const getPlugins = function (env) {
8+
const devMode = env === ENVs.dev;
9+
const plugins = [
10+
new MiniCssExtractPlugin({
11+
filename: Conf.target.css_bundle,
12+
chunkFilename: '[id].css',
13+
ignoreOrder: false
14+
}),
1715
];
1816

1917
return plugins;
2018
};
2119

22-
const getLoaders = function(env) {
23-
const loaders = [
24-
{test: /\.js$/, include: Conf.src.js_path, loaders: ['babel', 'eslint']},
25-
{test: /(\.css|\.scss)$/, loader: MiniCssExtractPlugin.loader}
26-
];
27-
28-
return loaders;
29-
};
30-
3120
function getConfig(env) {
21+
if (Object.values(ENVs).indexOf(env) < 0)
22+
return {};
23+
const devMode = env === ENVs.dev;
24+
3225
return {
3326
mode: env,
3427
entry: Conf.src.js_entry,
3528
output: {
3629
path: Conf.target.js_path,
37-
publicPath: '/',
30+
publicPath: Conf.target.path,
3831
filename: Conf.target.js_bundle
3932
},
40-
devtool: env === ENVs.prd ? 'cheap-module-source-map' : 'eval',
33+
devtool: 'source-map',
4134
target: 'web',
4235
plugins: getPlugins(env),
4336
module: {
44-
loader: getLoaders(env)
37+
rules: [
38+
{
39+
test: /\.(js|jsx)$/,
40+
exclude: /node_modules/,
41+
use: [
42+
{ loader: "babel-loader" }
43+
]
44+
},
45+
{
46+
test: [/\.(css|scss)$/],
47+
use: [
48+
{
49+
loader: MiniCssExtractPlugin.loader,
50+
options: {
51+
hmr: devMode
52+
}
53+
},
54+
{
55+
loader: 'css-loader',
56+
options: {
57+
sourceMap: false
58+
}
59+
},
60+
{
61+
loader: 'sass-loader',
62+
options: {
63+
sourceMap: false
64+
}
65+
}
66+
]
67+
}
68+
]
4569
}
4670
};
4771
}

‎tool/webpack.runner.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,28 @@ let _post_compile_func = null;
2727

2828
function compilerCallback(err, stats) {
2929
if (err) { // so a fatal error occurred. Stop here.
30-
console.log(`\n--- Webpack - ${Conf.TAR_BASE} - error: ${err}`.bold.red);
30+
console.log(`\n--- Webpack - ${Conf.TAR_BASE} - error: ${err}`);
3131
return 1;
3232
}
3333

34-
let jsonStats = stats.toJson(statsOptions);
34+
const jsonStats = stats.toJson(statsOptions);
3535

3636
if (jsonStats.errors.length > 0) {
37-
jsonStats.errors.map(error => console.log(`✗ Error: Webpack - v${jsonStats.version} - : ${error}`.bold.red));
37+
console.log(`✗ Error: Webpack - v${jsonStats.version} :`);
38+
jsonStats.errors.map(error => console.log(error));
3839
return 2;
3940
}
4041

4142
if (jsonStats.warnings.length > 0) {
42-
console.log('Webpack generated the following warnings: '.bold.yellow);
43-
jsonStats.warnings.map(warning => console.log(warning.bold.yellow));
43+
console.log(`⚕︎ Warning: Webpack - v${jsonStats.version} :`);
44+
jsonStats.warnings.map(warning => console.log(warning));
4445
}
4546

46-
console.log(`\n=== Webpack v${jsonStats.version} - ${jsonStats.hash} - ${jsonStats.time}ms\n`.green);
47+
console.log(`\nWebpack v${jsonStats.version} - ${jsonStats.hash} - ${jsonStats.time}ms\n`);
4748
jsonStats.assets.map( a => console.log(`${a.name}\t\tsize:${a.size}\tstatus:${a.emitted ? 'ok': 'error'}`));
4849

4950
// if we got this far, the build succeeded.
50-
console.log(`\n=== Webpack v${jsonStats.version} - ${Conf.TAR_BASE} - success`.green.bold);
51+
console.log(`\nSuccess: Webpack v${jsonStats.version} - ${Conf.TAR_BASE} - success`);
5152
console.log("process.env.NODE_ENV", process.env.NODE_ENV);
5253

5354
if ( typeof(_post_compile_func) === 'function' ) {
@@ -58,13 +59,13 @@ function compilerCallback(err, stats) {
5859
}
5960

6061
function compileOnce() {
61-
console.log('\n=== Generating minified bundle ...\n'.bold.blue);
62+
console.log('\n=== Generating minified bundle ...\n');
6263
const webpackConfig = webpackConfigBuilder('production');
6364
webpack(webpackConfig).run(compilerCallback);
6465
}
6566

6667
function watchCompile(callback) {
67-
console.log('\n=== Watching and generating minified bundle ...'.bold.blue);
68+
console.log('\n=== Watching and generating minified bundle ...');
6869
_post_compile_func = callback;
6970
const webpackConfigWatch = webpackConfigBuilder('development');
7071
webpack(webpackConfigWatch).watch({aggregateTimeout: 10, poll: true}, compilerCallback);

‎webpack.config.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
module.exports = {
22
module: {
33
rules: [
4-
{
5-
test: /\.(js|jsx)$/,
6-
exclude: /node_modules/,
7-
use: {
8-
loader: "babel-loader"
9-
}
10-
}
114
]
12-
}
5+
},
6+
devServer: {
7+
contentBase: './target',
8+
compress: true,
9+
port: 9000
10+
}
1311
};

0 commit comments

Comments
 (0)