Skip to content

Upgrade webpack v4 #213

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

Merged
merged 5 commits into from
Nov 30, 2018
Merged

Upgrade webpack v4 #213

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8662cac
Update webpack dependencies to v4
mwistrand Nov 15, 2018
ead5dfa
Update webpack-contrib to next
mwistrand Nov 30, 2018
888ee2c
Update cypress spec
mwistrand Nov 30, 2018
e008371
Update @dojo/webpack-contrib
mwistrand Nov 30, 2018
d0fae95
Fix terser-webpack-plugin version
mwistrand Nov 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6,606 changes: 2,890 additions & 3,716 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

57 changes: 28 additions & 29 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,30 +60,30 @@
"devDependencies": {
"@dojo/cli": "^4.0.0",
"@dojo/scripts": "~3.0.1",
"@types/clean-webpack-plugin": "0.1.0",
"@types/clean-webpack-plugin": "0.1.2",
"@types/connect-history-api-fallback": "1.3.1",
"@types/copy-webpack-plugin": "4.4.1",
"@types/execa": "0.8.0",
"@types/express": "4.11.0",
"@types/extract-text-webpack-plugin": "3.0.0",
"@types/globby": "6.1.0",
"@types/gzip-size": "4.0.0",
"@types/html-webpack-plugin": "2.30.3",
"@types/html-webpack-plugin": "3.2.0",
"@types/http-proxy-middleware": "^0.17.5",
"@types/jsonfile": "4.0.1",
"@types/loader-utils": "1.1.0",
"@types/loader-utils": "1.1.3",
"@types/log-symbols": "2.0.0",
"@types/log-update": "2.0.0",
"@types/mini-css-extract-plugin": "0.2.0",
"@types/mockery": "1.4.29",
"@types/node": "~9.6.5",
"@types/ora": "1.3.1",
"@types/rimraf": "2.0.2",
"@types/sinon": "~4.3.3",
"@types/strip-ansi": "3.0.0",
"@types/tapable": "0.2.4",
"@types/webpack": "3.8.1",
"@types/webpack-chunk-hash": "0.4.0",
"@types/webpack-manifest-plugin": "1.3.1",
"@types/tapable": "1.0.4",
"@types/webpack": "4.4.19",
"@types/webpack-chunk-hash": "0.4.2",
"@types/webpack-manifest-plugin": "1.3.2",
"@types/yargs": "10.0.0",
"codecov": "~3.0.4",
"cpx": "~1.5.0",
Expand All @@ -101,55 +101,54 @@
},
"dependencies": {
"@dojo/webpack-contrib": "next",
"brotli-webpack-plugin": "0.5.0",
"brotli-webpack-plugin": "1.0.0",
"chalk": "2.4.1",
"clean-webpack-plugin": "0.1.17",
"clean-webpack-plugin": "1.0.0",
"cli-columns": "3.1.2",
"compression-webpack-plugin": "1.1.7",
"compression-webpack-plugin": "2.0.0",
"connect-history-api-fallback": "1.5.0",
"css-loader": "0.28.7",
"css-loader": "1.0.1",
"eventsource-polyfill": "0.9.6",
"express": "4.16.2",
"express-static-gzip": "1.1.3",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"file-loader": "2.0.0",
"globby": "7.1.1",
"gzip-size": "4.1.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"http-proxy-middleware": "^0.19.0",
"identity-loader": "1.0.1",
"imports-loader": "0.7.1",
"imports-loader": "0.8.0",
"istanbul-instrumenter-loader": "3.0.1",
"json-css-module-loader": "1.0.2",
"jsonfile": "4.0.0",
"loader-utils": "1.1.0",
"log-symbols": "2.1.0",
"log-update": "2.3.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "0.4.2",
"optimize-css-assets-webpack-plugin": "5.0.1",
"ora": "1.3.0",
"pkg-dir": "2.0.0",
"postcss-import": "12.0.0",
"postcss-loader": "2.0.8",
"postcss-loader": "3.0.0",
"postcss-preset-env": "5.3.0",
"slash": "1.0.0",
"source-map-loader-cli": "0.0.1",
"strip-ansi": "3.0.1",
"style-loader": "0.19.0",
"ts-loader": "3.1.1",
"terser-webpack-plugin": "^1.1.0",
Copy link
Member

@agubler agubler Nov 30, 2018

Choose a reason for hiding this comment

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

should we fix this?

Copy link
Contributor Author

@mwistrand mwistrand Nov 30, 2018

Choose a reason for hiding this comment

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

Thanks for catching that.

"ts-loader": "5.3.0",
"ts-node": "7.0.1",
"tslint": "5.8.0",
"tslint-loader": "3.5.3",
"tslint-loader": "3.5.4",
"typed-css-modules": "0.3.1",
"uglifyjs-webpack-plugin-terser": "1.1.0",
"umd-compat-loader": "2.1.1",
"webpack": "3.8.1",
"webpack-chunk-hash": "0.5.0",
"webpack-dev-middleware": "2.0.3",
"webpack-hot-middleware": "2.21.0",
"webpack-manifest-plugin": "1.3.2",
"webpack-mild-compile": "1.0.0",
"webpack-pwa-manifest": "3.6.2",
"wrapper-webpack-plugin": "1.0.0"
"webpack": "4.25.1",
"webpack-chunk-hash": "0.6.0",
"webpack-dev-middleware": "3.4.0",
"webpack-hot-middleware": "2.24.3",
"webpack-manifest-plugin": "2.0.4",
"webpack-mild-compile": "3.3.1",
"webpack-pwa-manifest": "3.7.1",
"wrapper-webpack-plugin": "2.0.0"
}
}
143 changes: 72 additions & 71 deletions src/base.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
import * as webpack from 'webpack';
import * as path from 'path';
import { readFileSync, existsSync } from 'fs';
import CssModulePlugin from '@dojo/webpack-contrib/css-module-plugin/CssModulePlugin';
import ExternalLoaderPlugin from '@dojo/webpack-contrib/external-loader-plugin/ExternalLoaderPlugin';
import registryTransformer from '@dojo/webpack-contrib/registry-transformer';
import I18nPlugin from '@dojo/webpack-contrib/i18n-plugin/I18nPlugin';
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
import { WebpackConfiguration } from './interfaces';
import registryTransformer from '@dojo/webpack-contrib/registry-transformer';
import getFeatures from '@dojo/webpack-contrib/static-build-loader/getFeatures';
import { readFileSync, existsSync } from 'fs';
import * as loaderUtils from 'loader-utils';
import * as ts from 'typescript';
import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
import * as path from 'path';
import * as tsnode from 'ts-node';
import getFeatures from '@dojo/webpack-contrib/static-build-loader/getFeatures';
import * as ts from 'typescript';
import * as webpack from 'webpack';

const postcssPresetEnv = require('postcss-preset-env');
const postcssImport = require('postcss-import');
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
const slash = require('slash');
const WrapperPlugin = require('wrapper-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const basePath = process.cwd();
const srcPath = path.join(basePath, 'src');
Expand Down Expand Up @@ -75,11 +73,8 @@ function getLocalIdent(
options: any
) {
if (!options.context) {
if (loaderContext.options && typeof loaderContext.options.context === 'string') {
options.context = loaderContext.options.context;
} else {
options.context = loaderContext.context;
}
const { context, rootContext } = loaderContext;
options.context = typeof rootContext === 'string' ? rootContext : context;
}
const request = slash(path.relative(options.context, loaderContext.resourcePath));
options.content = `${options.hashPrefix}${request}+${localName}`;
Expand Down Expand Up @@ -153,7 +148,7 @@ function loadRoutingOutlets() {
return outlets;
}

export default function webpackConfigFactory(args: any): WebpackConfiguration {
export default function webpackConfigFactory(args: any): webpack.Configuration {
const extensions = args.legacy ? ['.ts', '.tsx', '.js'] : ['.ts', '.tsx', '.mjs', '.js'];
const compilerOptions = args.legacy ? {} : { target: 'es6', module: 'esnext' };
let features = args.legacy ? args.features : { ...(args.features || {}), ...getFeatures('chrome') };
Expand Down Expand Up @@ -226,50 +221,48 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
}
};

const postCssModuleLoader = ExtractTextPlugin.extract({
fallback: ['style-loader'],
use: [
'@dojo/webpack-contrib/css-module-decorator-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]',
getLocalIdent
}
},
{
loader: 'postcss-loader?sourceMap',
options: {
ident: 'postcss',
plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
}
const postCssModuleLoader = [
MiniCssExtractPlugin.loader,
'@dojo/webpack-contrib/css-module-decorator-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]',
getLocalIdent
}
]
});
const cssLoader = ExtractTextPlugin.extract({
fallback: ['style-loader'],
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1
}
},
{
loader: 'postcss-loader?sourceMap',
options: {
ident: 'postcss',
plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
}
},
{
loader: 'postcss-loader?sourceMap',
options: {
ident: 'postcss',
plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
}
]
});
}
];

const cssLoader = [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1
}
},
{
loader: 'postcss-loader?sourceMap',
options: {
ident: 'postcss',
plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
}
}
];

const config: webpack.Configuration = {
mode: 'development',
externals: [
function(context, request, callback) {
const externals = (args.externals && args.externals.dependencies) || [];
Expand Down Expand Up @@ -315,6 +308,19 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
modules: [basePath, path.join(basePath, 'node_modules')],
extensions
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
main: {
chunks: 'initial',
minChunks: 1,
name: 'main',
reuseExistingChunk: true
}
}
}
},
devtool: 'source-map',
watchOptions: { ignored: /node_modules/ },
plugins: removeEmpty([
Expand All @@ -324,18 +330,9 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
}),
new CssModulePlugin(basePath),
new IgnorePlugin(/request\/providers\/node/),
new ExtractTextPlugin({
filename: 'main.css',
allChunks: true
}),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { calc: false }]
}
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new webpack.NamedChunksPlugin(),
new webpack.NamedModulesPlugin(),
(args.externals || isTest) &&
new WrapperPlugin({
test: /(main.*(\.js$))/,
Expand Down Expand Up @@ -416,6 +413,10 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
},
{
test: /\.mjs?$/,
// We cannot trust that all `mjs` modules use the correct import format for all dependencies
// (e.g., do not use `import from` for cjs modules). Setting the type to `javascript/auto` allows
// incorrect imports to continue working.
type: 'javascript/auto',
use: removeEmpty([
features && {
loader: '@dojo/webpack-contrib/static-build-loader',
Expand Down Expand Up @@ -458,16 +459,16 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
!/.*(\/|\\)node_modules(\/|\\)@dojo(\/|\\)widgets(\/|\\).*/.test(path)
);
},
use: ExtractTextPlugin.extract({
fallback: ['style-loader'],
use: {
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1
}
}
})
]
},
{
include: allPaths,
Expand All @@ -484,5 +485,5 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
}
};

return config as WebpackConfiguration;
return config as webpack.Configuration;
}
Loading