Skip to content

Commit

Permalink
testing webpack and babel upgrade with webpack 4 support in config.
Browse files Browse the repository at this point in the history
  • Loading branch information
Matthew Mulholland committed Oct 3, 2018
1 parent 013357d commit a629db7
Show file tree
Hide file tree
Showing 7 changed files with 840 additions and 722 deletions.
1 change: 1 addition & 0 deletions .electron-vue/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ function build () {

function pack (config) {
return new Promise((resolve, reject) => {
config.mode = 'production'
webpack(config, (err, stats) => {
if (err) reject(err.stack || err)
else if (stats.hasErrors()) {
Expand Down
10 changes: 7 additions & 3 deletions .electron-vue/dev-client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true
hotClient.subscribe(event => {
/**
* Reload browser when HTMLWebpackPlugin emits a new index.html
*
* Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
* https://github.com/SimulatedGREG/electron-vue/issues/437
* https://github.com/jantimon/html-webpack-plugin/issues/680
*/
if (event.action === 'reload') {
window.location.reload()
}
// if (event.action === 'reload') {
// window.location.reload()
// }

/**
* Notify `mainWindow` when `main` process is compiling,
Expand Down
12 changes: 6 additions & 6 deletions .electron-vue/dev-runner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,21 @@ function logStats (proc, data) {
function startRenderer () {
return new Promise((resolve, reject) => {
rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)

rendererConfig.mode = 'development'
const compiler = webpack(rendererConfig)
hotMiddleware = webpackHotMiddleware(compiler, {
log: false,
heartbeat: 2500
})

compiler.plugin('compilation', compilation => {
compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
compiler.hooks.compilation.tap('compilation', compilation => {
compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})

compiler.plugin('done', stats => {
compiler.hooks.done.tap('done', stats => {
logStats('Renderer', stats)
})

Expand All @@ -80,10 +80,10 @@ function startRenderer () {
function startMain () {
return new Promise((resolve, reject) => {
mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)

mainConfig.mode = 'development'
const compiler = webpack(mainConfig)

compiler.plugin('watch-run', (compilation, done) => {
compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
logStats('Main', chalk.white.bold('compiling...'))
hotMiddleware.publish({ action: 'compiling' })
done()
Expand Down
101 changes: 92 additions & 9 deletions .electron-vue/webpack.renderer.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,98 @@ const webpack = require('webpack')

const BabiliWebpackPlugin = require('babili-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
var FixDefaultImportPlugin = require('webpack-fix-default-import-plugin')
const FixDefaultImportPlugin = require('webpack-fix-default-import-plugin')
const {VueLoaderPlugin} = require('vue-loader')

/**
* List of node_modules to include in webpack bundle
*
* Required for specific packages like Vue UI libraries
* that provide pure *.vue files that need compiling
* https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
*
*
* // optimization: {
// splitChunks: {
// chunks: 'all'
// },
// cacheGroups: {
// styles: {
// name: 'styles',
// test: /\.s?css$/,
// chunks: 'all',
// minChunks: 1,
// reuseExistingChunk: true,
// enforce: true,
// },
// }
// },
optimization: {
minimize: false,
runtimeChunk: {
name: 'vendor'
},
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /node_modules/,
name: "vendor",
chunks: "initial",
minSize: 1
}
}
}
},
*/
let whiteListedModules = ['vue']
const defaultMinify = {
const defaultMinify = {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
}

const sourceMap = process.env.NODE_ENV === 'development'

const defaultNodeModules = process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false

let rendererConfig = {
devtool: '#cheap-module-eval-source-map',
devtool: sourceMap ? '#cheap-module-eval-source-map' : undefined,
entry: {
renderer: path.join(__dirname, '../src/renderer/main.js')
},
externals: [
...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
],
optimization: {
minimize: false,
runtimeChunk: {
name: 'vendor'
},
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /node_modules/,
name: "vendor",
chunks: "initial",
minSize: 1
},
styles: {
name: 'styles',
test: /\.s?css$/,
chunks: 'initial',
minChunks: 1,
reuseExistingChunk: true,
enforce: true,
},
}
}
},
module: {
rules: [
{
Expand All @@ -53,10 +115,20 @@ let rendererConfig = {
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
use: [
{
loader:
process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
options: {
sourceMap
}
},
{
loader: 'css-loader',
options: {
sourceMap
}
}]
},
{
test: /\.html$/,
Expand Down Expand Up @@ -85,6 +157,14 @@ let rendererConfig = {
}
}
},
{
test: /\.styl(us)?$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
Expand Down Expand Up @@ -120,7 +200,8 @@ let rendererConfig = {
__filename: process.env.NODE_ENV !== 'production'
},
plugins: [
new ExtractTextPlugin('styles.css'),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({filename: 'styles.css'}),
createHtmlPlugin('index'),
createHtmlPlugin('keyboardhelp'),
createHtmlPlugin('urldialog'),
Expand Down Expand Up @@ -154,6 +235,7 @@ function createHtmlPlugin(pageName) {
nodeModules: defaultNodeModules
})
}

/**
* Adjust rendererConfig for development settings
*/
Expand Down Expand Up @@ -187,6 +269,7 @@ if (process.env.NODE_ENV === 'production') {
minimize: true
})
)
rendererConfig.optimization.minimize = true
}

module.exports = rendererConfig
32 changes: 17 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"clean": "cross-env BUILD_TARGET=cleanAll node .electron-vue/build.js",
"sign:win:installer": "cross-env node ./signWinInstaller.js",
"dev": "node .electron-vue/dev-runner.js",
"dev": "node --trace-deprecation .electron-vue/dev-runner.js",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
"pack": "yarn run pack:main && yarn run pack:renderer",
Expand Down Expand Up @@ -124,16 +124,17 @@
},
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.25",
"babel-core": "^6.22.1",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-istanbul": "^4.1.6",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.26.0",
"babili-webpack-plugin": "^0.1.1",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^1.1.3",
"chai": "^4.0.0",
"chai-as-promised": "^7.1.1",
Expand Down Expand Up @@ -163,8 +164,8 @@
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"flush-promises": "^1.0.0",
"html-webpack-include-assets-plugin": "^0.0.5",
"html-webpack-plugin": "^2.16.1",
"html-webpack-include-assets-plugin": "^1.0.5",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.4",
"jsonfile": "^4.0.0",
"karma": "^2.0.3",
Expand All @@ -176,6 +177,7 @@
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.32",
"karma-webpack": "^3.0.0",
"mini-css-extract-plugin": "^0.4.3",
"mocha": "^5.0.5",
"mocha-lcov-reporter": "^1.3.0",
"mocha-webpack": "^1.0.1",
Expand All @@ -191,18 +193,18 @@
"sinon-test": "^2.1.3",
"spectron": "^3.7.1",
"spectron-fake-menu": "^0.0.1",
"style-loader": "^0.21.0",
"style-loader": "^0.23.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.2",
"vue-loader": "^12.2.1",
"vue-server-renderer": "^2.5.14",
"vue-style-loader": "^4.1.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-server-renderer": "^2.5.17",
"vue-style-loader": "^4.1.2",
"webpack": "^4.20.2",
"webpack-dev-server": "^3.1.9",
"webpack-fix-default-import-plugin": "^1.0.3",
"webpack-hot-middleware": "^2.21.2",
"webpack-hot-middleware": "^2.24.2",
"webpack-merge": "^4.1.2",
"webpack-node-externals": "^1.7.2",
"webpack-shell-plugin": "^0.5.0"
Expand Down
2 changes: 1 addition & 1 deletion src/main/index.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
/* eslint-disable */

// Set environment for development
process.env.NODE_ENV = 'development'
// process.env.NODE_ENV = 'development'

// Install `electron-debug` with `devtron`
require('electron-debug')({showDevTools: true})
Expand Down
Loading

0 comments on commit a629db7

Please sign in to comment.