Skip to content

Commit

Permalink
Upgrade webpack v4 (#213)
Browse files Browse the repository at this point in the history 
- Update webpack-contrib to next
- Replace ExtractTextPlugin with MiniCssExtractPlugin, but pin to 0.4.2
  until shellscape/webpack-manifest-plugin#167
  is resolved
- Replace removed CommonsChunkPlugin with `optimize.splitChunks`
  configuration option
- Remove plugins provided by `mode` configuration option:
  NamedChunksPlugin, NamedModulesPlugin, and DefinePlugin
- Use terser-webpack-plugin over uglifyjs-webpack-plugin-terser
- Upgrade to webpack-mild-compile@3.3.1
- Add runtime chunk, disable default chunk, and force modules into main
  chunk
- Filter css order warnings
- Move optimize-css-assets-webpack-plugin to dist config
- Update tapable typings
  • Loading branch information
@mwistrand
mwistrand committed Nov 30, 2018
1 parent 537d7f4 commit b289729
Show file tree
Hide file tree
Showing 13 changed files with 3,176 additions and 3,978 deletions.
6,606 changes: 2,890 additions & 3,716 deletions package-lock.json
View file

Large diffs are not rendered by default.

57 changes: 28 additions & 29 deletions package.json
View file
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",
"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
@@ -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;
}

0 comments on commit b289729

Please sign in to comment.