From 7c0789cabf73739f24f856aa8398da8bfa5aebc9 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 13 Dec 2017 21:35:56 -0500 Subject: [PATCH] move webpack config out of sapper, into the app --- lib/config.js | 7 +++ lib/route_manager.js | 16 ++++++ package.json | 8 +-- utils/create_webpack_compiler.js | 88 +++----------------------------- webpack/config.js | 43 ++++++++++++++++ 5 files changed, 76 insertions(+), 86 deletions(-) create mode 100644 lib/config.js create mode 100644 lib/route_manager.js create mode 100644 webpack/config.js diff --git a/lib/config.js b/lib/config.js new file mode 100644 index 0000000..bf234f9 --- /dev/null +++ b/lib/config.js @@ -0,0 +1,7 @@ +const path = require('path'); + +exports.dev = process.env.NODE_ENV !== 'production'; + +exports.templates = path.resolve(process.env.SAPPER_TEMPLATES || 'templates'); +exports.src = path.resolve(process.env.SAPPER_ROUTES || 'routes'); +exports.dest = path.resolve(process.env.SAPPER_DEST || '.sapper'); \ No newline at end of file diff --git a/lib/route_manager.js b/lib/route_manager.js new file mode 100644 index 0000000..d551143 --- /dev/null +++ b/lib/route_manager.js @@ -0,0 +1,16 @@ +const glob = require('glob'); +const create_routes = require('../utils/create_routes.js'); +const { src } = require('./config.js'); + +const route_manager = { + routes: create_routes( + glob.sync('**/*.+(html|js|mjs)', { cwd: src }) + ), + + onchange(fn) { + // TODO in dev mode, keep this updated, and allow + // webpack compiler etc to hook into it + } +}; + +module.exports = route_manager; \ No newline at end of file diff --git a/package.json b/package.json index b66491c..81ca0ba 100644 --- a/package.json +++ b/package.json @@ -12,15 +12,11 @@ "webpack": "^3.10.0" }, "devDependencies": { - "extract-text-webpack-plugin": "^3.0.2", "mocha": "^4.0.1", - "svelte": "^1.47.1", - "svelte-loader": "^2.2.1" + "svelte": "^1.47.1" }, "peerDependencies": { - "extract-text-webpack-plugin": "^3.0.2", - "svelte": "^1.47.1", - "svelte-loader": "^2.2.1" + "svelte": "^1.47.1" }, "scripts": { "test": "mocha --opts mocha.opts" diff --git a/utils/create_webpack_compiler.js b/utils/create_webpack_compiler.js index ce467e2..8fbd7ac 100644 --- a/utils/create_webpack_compiler.js +++ b/utils/create_webpack_compiler.js @@ -9,85 +9,13 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = function create_webpack_compiler(out, routes, dev) { const compiler = {}; - const client = webpack({ - entry: { - main: `${out}/main` - }, - resolve: { - extensions: ['.js', '.html'] - }, - output: { - path: `${out}/client`, - filename: '[name].[hash].js', - chunkFilename: '[name].[id].js', - publicPath: '/client/' - }, - module: { - rules: [ - { - test: /\.html$/, - exclude: /node_modules/, - use: { - loader: 'svelte-loader', - options: { - emitCss: true, - cascade: false, - store: true - } - } - }, - { - test: /\.css$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: [{ loader: 'css-loader', options: { sourceMap: dev } }] - }) - } - ] - }, - plugins: [ - new ExtractTextPlugin('main.css'), - !dev && new webpack.optimize.ModuleConcatenationPlugin(), - !dev && new UglifyJSPlugin() - ].filter(Boolean), - devtool: dev ? 'inline-source-map' : false - }); + const client = webpack( + require(path.resolve('webpack.client.config.js')) + ); - const server_entries = {}; - routes.forEach(route => { - server_entries[route.id] = path.resolve('routes', route.file); - }); - - const server = webpack({ - entry: server_entries, - target: 'node', - resolve: { - extensions: ['.js', '.html'] - }, - output: { - path: `${out}/server`, - filename: '[name].[hash].js', - chunkFilename: '[name].[id].js', - libraryTarget: 'commonjs2' - }, - module: { - rules: [ - { - test: /\.html$/, - exclude: /node_modules/, - use: { - loader: 'svelte-loader', - options: { - css: false, - cascade: false, - store: true, - generate: 'ssr' - } - } - } - ] - } - }); + const server = webpack( + require(path.resolve('webpack.server.config.js')) + ); if (false) { // TODO watch in dev // TODO how can we invalidate compiler.client_main when watcher restarts? @@ -107,7 +35,7 @@ module.exports = function create_webpack_compiler(out, routes, dev) { compiler.client_main = new Promise((fulfil, reject) => { client.run((err, stats) => { if (err || stats.hasErrors()) { - console.log(stats.toString()); + console.log(stats.toString({ colors: true })); reject(err); } @@ -120,7 +48,7 @@ module.exports = function create_webpack_compiler(out, routes, dev) { server.run((err, stats) => { if (err || stats.hasErrors()) { // TODO deal with hasErrors - console.log(stats.toString()); + console.log(stats.toString({ colors: true })); reject(err); } diff --git a/webpack/config.js b/webpack/config.js new file mode 100644 index 0000000..2bb1499 --- /dev/null +++ b/webpack/config.js @@ -0,0 +1,43 @@ +const path = require('path'); +const route_manager = require('../lib/route_manager.js'); +const { src, dest, dev } = require('../lib/config.js'); + +module.exports = { + dev, + + client: { + entry: () => { + return { + main: `${dest}/main.js` + }; + }, + + output: () => { + return { + path: `${dest}/client`, + filename: '[name].[hash].js', + chunkFilename: '[name].[id].js', + publicPath: '/client/' + }; + } + }, + + server: { + entry: () => { + const entries = {}; + route_manager.routes.forEach(route => { + entries[route.id] = path.resolve(src, route.file); + }); + return entries; + }, + + output: () => { + return { + path: `${dest}/server`, + filename: '[name].[hash].js', + chunkFilename: '[name].[id].js', + libraryTarget: 'commonjs2' + }; + } + } +}; \ No newline at end of file