Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initial updates for webpack 5 support #101

Merged
merged 12 commits into from Jun 10, 2021
Merged

Initial updates for webpack 5 support #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
284b4d7
Remove tar dependency
brophdawg11 Jun 1, 2021
4c30597
Add some missing deps (vuex,vue-router,memory-fs)
brophdawg11 Jun 1, 2021
3ff71a3
Update webpack to v5 and update webpack deps to latest
brophdawg11 Jun 1, 2021
f57231f
Add patch-package and vue-server-renderer patch
brophdawg11 Jun 1, 2021
77d5f61
Remove resolve, initialStateMetaTag, and some logging
brophdawg11 Jun 1, 2021
4f5371f
Remove patches directory, must be handled from parent repo
brophdawg11 Jun 1, 2021
c6df06f
Update output.libraryTarget -> output.library.type
brophdawg11 Jun 1, 2021
d37c241
Move base devtool config to client build
brophdawg11 Jun 1, 2021
b0f12fd
Update webpack-dev-middleware to latest
brophdawg11 Jun 3, 2021
93058c6
Update HMR for webpack 5
brophdawg11 Jun 4, 2021
1ee302d
Remove patch-package
brophdawg11 Jun 10, 2021
8e3743c
Update vue/vue-server-renderer/vue-template-compiler to 2.6.14
brophdawg11 Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 5 additions & 24 deletions build/webpack.base.config.js
View file
Open in desktop
@@ -1,7 +1,5 @@
/* eslint-disable no-console */

const path = require('path');

const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Expand All @@ -10,14 +8,11 @@ const isLocal = process.env.NODE_ENV === 'local';
const isProd = process.env.NODE_ENV === 'production';
const isDev = !isLocal && !isProd;
const logLevel = process.env.LOG_LEVEL || 'debug';
const environment = isProd ? 'production' : 'development';
const nodeEnv = isProd ? 'production' : 'development';

console.log(`process.env.NODE_ENV: ${process.env.NODE_ENV}`);
console.log(`Webpack building for environment: ${environment}`);
console.log(`Webpack building for NODE_ENV: ${nodeEnv}`);

function getCssLoaders(config) {
console.log(`Enable PostCSS: ${config.enablePostCss}`);

const addlLoaders = [
...(config.enablePostCss ? [{
loader: 'postcss-loader',
Expand Down Expand Up @@ -71,26 +66,12 @@ module.exports = {
logLevel,
getBaseConfig(config) {
return {
mode: environment,
devtool: isProd ? 'source-map' : 'eval-source-map',
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved this to the client build so we don't have to turn it off for server builds

mode: nodeEnv,
output: {
publicPath: '/dist/',
filename: isProd ? '[name].[chunkhash].js' : '[name].js',
chunkFilename: isProd ? '_[name].[chunkhash].js' : '_[name].js',
},
resolve: {
alias: {
'@components': path.resolve(config.rootDir, 'src/components'),
'@dist': path.resolve(config.rootDir, 'dist'),
'@js': path.resolve(config.rootDir, 'src/js'),
'@scss': path.resolve(config.rootDir, 'src/scss'),
'@server': path.resolve(config.rootDir, 'src/server'),
'@src': path.resolve(config.rootDir, 'src'),
'@static': path.resolve(config.rootDir, 'static'),
'@store': path.resolve(config.rootDir, 'src/store'),
},
extensions: ['*', '.js', '.vue', '.json'],
},
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Breaking change - no longer providing anything out of the box here - this configuration is left up to the consuming application build

module: {
rules: [
{
Expand Down Expand Up @@ -160,7 +141,7 @@ module.exports = {
resourceQuery: /inline/,
use: {
loader: 'svg-inline-loader',
options: config.svgInlineLoaderOptions,
options: config.svgInlineLoaderOptions || {},
},
}, {
resourceQuery: /http/,
Expand All @@ -186,7 +167,7 @@ module.exports = {
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.NODE_ENV': JSON.stringify(nodeEnv),
}),
new VueLoaderPlugin(),
...(config.extractCss ? [
Expand Down
1 change: 1 addition & 0 deletions build/webpack.client.config.js
View file
Open in desktop
Expand Up @@ -27,6 +27,7 @@ module.exports = function getClientConfig(configOpts) {

const clientConfig = merge(getBaseConfig(config), {
name: 'client',
devtool: isProd ? 'source-map' : 'eval-source-map',
entry: {
app: './src/js/entry-client.js',
},
Expand Down
6 changes: 4 additions & 2 deletions build/webpack.server.config.js
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@ const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');

const { getBaseConfig } = require('./webpack.base.config');

function serverExternals(context, request, callback) {
function serverExternals({ request }, callback) {
// Tell webpack to ignore all node_modules dependencies except
// lodash-es so we get proper tree shaking
const nonRelativeExp = /^\w.*$/i;
Expand Down Expand Up @@ -43,7 +43,9 @@ module.exports = function getServerConfig(configOpts) {
entry: './src/server/entry-server.js',
output: {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2',
library: {
type: 'commonjs2',
},
},
target: 'node',
externals: serverExternals,
Expand Down