Skip to content

Commit

Permalink
Upgrade to Webpack v4
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
- Force CSS splitting by entry
- Filter css order warnings
- Add optimize-css-assets-webpack-plugin to dist config
- Update tapable typings
  • Loading branch information
@mwistrand
mwistrand committed Dec 5, 2018
1 parent 4f79356 commit cd256a0
Show file tree
Hide file tree
Showing 30 changed files with 33,556 additions and 14,658 deletions.
7,819 changes: 3,338 additions & 4,481 deletions package-lock.json
View file

Large diffs are not rendered by default.

55 changes: 27 additions & 28 deletions package.json
View file
Expand Up @@ -49,30 +49,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/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.1",
"@types/html-webpack-plugin": "3.2.0",
"@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/optimize-css-assets-webpack-plugin": "1.3.1",
"@types/ora": "^1.3.1",
"@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/yargs": "^10.0.0",
"cpx": "~1.5.0",
"@types/tapable": "1.0.4",
"@types/webpack": "4.4.19",
"@types/webpack-chunk-hash": "0.4.2",
"@types/yargs": "10.0.0",
"codecov": "~3.0.4",
"cpx": "~1.5.0",
"execa": "0.8.0",
"husky": "^0.14.3",
"lint-staged": "6.0.0",
Expand All @@ -86,45 +86,44 @@
},
"dependencies": {
"@dojo/framework": "^4.0.0",
"@dojo/webpack-contrib": "^4.0.0",
"@dojo/webpack-contrib": "next",
"chalk": "2.4.1",
"clean-webpack-plugin": "0.1.17",
"clean-webpack-plugin": "1.0.0",
"cli-columns": "3.1.2",
"css-loader": "0.28.7",
"css-loader": "1.0.1",
"express": "4.16.2",
"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-webpack-plugin": "3.2.0",
"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": "11.0.0",
"postcss-loader": "2.0.8",
"postcss-import": "12.0.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "5.3.0",
"slash": "1.0.0",
"source-map-loader-cli": "0.0.1",
"strip-ansi": "4.0.0",
"style-loader": "0.19.0",
"ts-loader": "3.1.1",
"terser-webpack-plugin": "1.1.0",
"ts-loader": "5.3.0",
"tslint": "5.8.0",
"tslint-loader": "3.5.3",
"tslint-loader": "3.5.4",
"typed-css-modules": "0.3.1",
"uglifyjs-webpack-plugin": "1.1.0",
"umd-compat-loader": "2.1.1",
"webpack": "3.8.1",
"webpack": "4.25.1",
"webpack-bundle-analyzer-sunburst": "1.3.0",
"webpack-chunk-hash": "0.5.0",
"webpack-dev-middleware": "2.0.3",
"webpack-hot-middleware": "2.21.0",
"webpack-mild-compile": "1.0.0"
"webpack-chunk-hash": "0.6.0",
"webpack-dev-middleware": "3.4.0",
"webpack-hot-middleware": "2.24.3",
"webpack-mild-compile": "3.3.1"
}
}
101 changes: 56 additions & 45 deletions src/base.config.ts
View file
@@ -1,14 +1,13 @@
import * as webpack from 'webpack';
import * as path from 'path';
import { existsSync } from 'fs';
import CssModulePlugin from '@dojo/webpack-contrib/css-module-plugin/CssModulePlugin';
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
import { WebpackConfiguration } from './interfaces';
import { existsSync } from 'fs';
import * as loaderUtils from 'loader-utils';
import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
import * as path from 'path';
import * as webpack from 'webpack';

const postcssPresetEnv = require('postcss-preset-env');
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
const slash = require('slash');
const IgnorePlugin = require('webpack/lib/IgnorePlugin');

const basePath = process.cwd();
const srcPath = path.join(basePath, 'src');
Expand Down Expand Up @@ -56,11 +55,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 All @@ -87,7 +83,7 @@ function colorToColorMod(style: CssStyle) {
});
}

export default function webpackConfigFactory(args: any): WebpackConfiguration {
export default function webpackConfigFactory(args: any): webpack.Configuration {
const elements = args.element ? [args.element] : args.elements;
const jsonpIdent = args.element ? args.element.name : 'custom-elements';
const extensions = args.legacy ? ['.ts', '.tsx', '.js'] : ['.ts', '.tsx', '.mjs', '.js'];
Expand All @@ -109,6 +105,7 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
};

const config: webpack.Configuration = {
mode: 'development',
entry: elements.reduce((entry: any, element: any) => {
entry[element.name] = [
`imports-loader?widgetFactory=${element.path}!${path.join(__dirname, 'template', 'custom-element.js')}`
Expand All @@ -127,17 +124,32 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
modules: [basePath, path.join(basePath, 'node_modules')],
extensions
},
devtool: 'source-map',
optimization: {
splitChunks: {
cacheGroups: elements.reduce((groups: { [key: string]: webpack.Options.CacheGroupsOptions }, element: any) => {
function recursiveIssuer(m: any): string | boolean {
return m.issuer ? recursiveIssuer(m.issuer) : m.name ? m.name : false;
}
groups[`${element.name}Styles`] = {
name: element.name,
test: (m: any, c: any, entry = element.name) =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true
};
return groups;
}, {})
}
},
watchOptions: { ignored: /node_modules/ },
plugins: removeEmpty([
new CssModulePlugin(basePath),
new webpack.BannerPlugin(banner),
new IgnorePlugin(/request\/providers\/node/),
new ExtractTextPlugin({
filename: (getPath: any) => getPath(`[name]-${packageJson.version}.css`)
} as any),
new webpack.NamedChunksPlugin(),
new webpack.NamedModulesPlugin()
new MiniCssExtractPlugin({
filename: `[name]-${packageJson.version}.css`,
sourceMap: true
} as any)
]),
module: {
rules: removeEmpty([
Expand Down Expand Up @@ -181,6 +193,10 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
])
},
{
// 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',
test: /\.mjs$/,
use: removeEmpty([
{
Expand Down Expand Up @@ -212,10 +228,7 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
{
test: /\.css$/,
exclude: allPaths,
use: ExtractTextPlugin.extract({
fallback: ['style-loader'],
use: ['css-loader?sourceMap']
})
use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap']
},
{
test: /\.m\.css.js$/,
Expand All @@ -225,33 +238,31 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
{
include: allPaths,
test: /.*\.css?$/,
use: 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: [require('postcss-import')(), postcssPresetEnv(postcssPresetConfig)]
}
use: [
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
}
]
})
},
{
loader: 'postcss-loader?sourceMap',
options: {
ident: 'postcss',
plugins: [require('postcss-import')(), postcssPresetEnv(postcssPresetConfig)]
}
}
]
}
])
}
};

return config as WebpackConfiguration;
return config;
}
7 changes: 4 additions & 3 deletions src/dev.config.ts
View file
@@ -1,18 +1,19 @@
import baseConfigFactory from './base.config';
import * as path from 'path';
import webpack = require('webpack');
import * as webpack from 'webpack';
import * as CleanWebpackPlugin from 'clean-webpack-plugin';

function webpackConfig(args: any): webpack.Configuration {
const config = baseConfigFactory(args);
const { plugins, output } = config;
const location = path.join('dev', args.element.name);
const outputPath = output!.path as string;

config.plugins = [...plugins, new CleanWebpackPlugin([location], { root: output.path, verbose: false })];
config.plugins = [...plugins!, new CleanWebpackPlugin([location], { root: outputPath, verbose: false })];

config.output = {
...output,
path: path.join(output.path!, location)
path: path.join(outputPath, location)
};

config.devtool = 'inline-source-map';
Expand Down
46 changes: 21 additions & 25 deletions src/dist.config.ts
View file
@@ -1,24 +1,36 @@
import baseConfigFactory from './base.config';
import webpack = require('webpack');
import * as path from 'path';
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
import * as CleanWebpackPlugin from 'clean-webpack-plugin';
import * as WebpackChunkHash from 'webpack-chunk-hash';
import { existsSync } from 'fs';

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer-sunburst').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const packageJsonPath = path.join(process.cwd(), 'package.json');
const packageJson = existsSync(packageJsonPath) ? require(packageJsonPath) : {};
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

function webpackConfig(args: any): webpack.Configuration {
const config = baseConfigFactory(args);
const { plugins, output } = config;
const location = path.join('dist', args.element.name);
const outputPath = output!.path as string;

config.mode = 'production';

config.optimization = {
...config.optimization,
minimizer: [
new TerserPlugin({ sourceMap: true, cache: true }),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { calc: false }]
}
})
]
};

config.plugins = [
...plugins,
...plugins!,
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
Expand All @@ -27,29 +39,13 @@ function webpackConfig(args: any): webpack.Configuration {
reportFilename: path.join('..', '..', 'info', args.element.name, 'report.html'),
statsFilename: path.join('..', '..', 'info', args.element.name, 'stats.json')
}),
new UglifyJsPlugin({ sourceMap: true, cache: true }),
new WebpackChunkHash(),
new CleanWebpackPlugin([location], { root: output.path, verbose: false }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
new CleanWebpackPlugin([location], { root: outputPath, verbose: false })
];

config.plugins = config.plugins.map(plugin => {
if (plugin instanceof ExtractTextPlugin) {
return new ExtractTextPlugin({
filename: `[name]-${packageJson.version}.css`,
allChunks: true
});
}
return plugin;
});

config.output = {
...output,
path: path.join(output.path!, location)
path: path.join(outputPath, location)
};

return config;
Expand Down
15 changes: 0 additions & 15 deletions src/interfaces.d.ts
View file

This file was deleted.

0 comments on commit cd256a0

Please sign in to comment.