webpack 4.0.0-alpha.5 feedback #6357
Comments
|
Hey @sokra, Just wanted to flag up that we're still hitting issues regarding when we're attempting to adding extra errors to the |
|
hey @johnnyreilly I have no clue about your issue. |
|
Thanks @sokra - will do! |
|
@sokra I spent some more time digging into this; it looks like the trigger for making webpack hang is registering errors in the I'm going to go through our test pack and make sure that our configs are webpack 4 compliant. |
|
@sokra Amazing! Where can I find more information on sideEffects support? Will we be able to tree shake typescript transpiled code? See: mishoo/UglifyJS#1261 |
|
@sokra Is it somehow possible to remove webpack I've tried different config configurations, |
|
webpack.config.js optimization: {
runtimeChunk: true
} |
|
@michael-ciniawsky close, but it just extracts it into separate chunk which I don't need. |
|
@vladshcherbin it sounds like you are looking to suggest a library target feature? If so open a separate issue regarding this plz 🙇 |
|
It suddenly stopped working in production, anyone knows where my error is? Relevant parts of webpack config output: {
filename: '[name].[hash].bundle.js',
chunkFilename: '[name].[hash].chunk.js',
path: path.resolve('./dist'),
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./.dev/index.template.ejs'),
inject: 'body'
}),
],
optimization: {
runtimeChunk: true,
splitChunks: { chunks: 'all' },
},
mode: 'production',This only happens when index.template.ejs <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>stepdoctor</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<div id="root"></div>
</body>
</html>Another thing i thought was odd,
I have to provide: |
No that's currently not possible. We may add such a mode in future, but this is not a goal of the 4.0.0 release. webpack is more focused on applications when readability of the output files is not relevant. |
|
Super cool, list of changes is amazing ❤️ it even has a thing that I was about to request last week but didn't have time yet to create an issue ("[new] Dead branches are now removed by webpack itself") |
|
For a config: const webpack = require('webpack');
module.exports = {
devtool: false,
module: {
defaultRules: [{
test: /\.js$/i,
type: "javascript/esm"
}],
}
}and input // test.js
module.exports = {
a() { return 'a' },
b() { return 'b' },
}
// index.js
import smth from './test'
export default function () {
return smth.a()
}I get And according to the announcement "Non-ESM can only imported via default import, everything else (including namespace import) emit errors" I was under impression that this should work (which actually was a confusing to me, so I wen to check out how this actually works) |
|
Output is correct. You should get an error. |
|
Like @ooflorent already says, you rules say: "Threat every module as ESM-only. This basically opts-out of CommonJs. So You probably want to do this instead: No // test.js
module.exports = {
a() { return 'a' },
b() { return 'b' },
}
// index.mjs <- MJS
import smth from './test'
// import { a } from './test' // this would show an error in .mjs but not in .js
export default function () {
return smth.a()
} |
Thanks! I was unsure how to use it and found example of Actually the result was kinda what I wanted. I was just confused by those statements from the announcement:
And I still dont know what second point is about. What form under what rules does it allow? I have understood it this way:
It seems that:
|
|
hi! optimization: {
splitChunks: {
chunkGroups: {
vendor: {
chunks: 'initial',
test: path.resolve(__dirname, 'node_modules'),
name: 'vendors',
enforce: true,
},
},
},
},output you may want to change |
|
16.7.0 Darwin Kernel Version In production mode, with config: package.json: Cheers, great work with the 4.0 - having a blast testing and seeing improvements :) |
|
@sokra There is a bug (still in beta.0) that misinterpretates
I first thought it's babel: babel/babel#7264 According to @Andarist
This turns: import React from 'react'
class A {
constructor() {
this.b = 1
}
method(a = this.b) {
console.log(a)
}
}into |
|
@drcmda could you file an issue? I’d be happy to fix this. I must admit i didn’t think about this case. |
|
What is the reasoning behind giving each entry its own runtime chunk (when E.g. entries This is the biggest source of friction so far as I try to upgrade. (PS: Overall I love the simplifications + improvements made, great job!) EDIT: I just made a quick plugin to create a single runtime chunk to fit my needs: https://gist.github.com/benthemonkey/05eceda801b8e1cee5a4dfd368caab2b |
|
@benthemonkey The chunk map in the runtime chunk contains only chunks referenced from that entry point. But I can see scenarios where a single runtime chunk is needed (i. e. using multiple entrypoints in a single page). If you want to you can contribute |
|
This alpha is over, please report bugs with the beta version as issues now. |
Complete changelog for 4.0.0-alpha.5 compared to version 3:
Items changed from 4.0.0-alpha.4 to 4.0.0-alpha.5 are prefixed with
[new]Big changes
modeor--mode) between two modes now: production or developmentoptimization.*(build your custom mode)process.env.NODE_ENVare set to production or development (only in built code, not in config)nonemode which disables everythingimport()always returns a namespace object. CommonJS modules are wrapped into the default exportimport()NoEmitOnErrorsPlugin->optimization.noEmitOnErrors(on by default in production mode)ModuleConcatenationPlugin->optimization.concatenateModules(on by default in production mode)NamedModulesPlugin->optimization.namedModules(on by default in develoment mode)CommonsChunkPluginwas removed ->optimization.splitChunkstype: "javascript/auto"when transforming JSON via loader to JSBig features
javascript/esmhandles ESM more strict compared tojavascript/auto:defaultimport, everything else (including namespace import) emit errors.mjsmodulesjavascript/esmis usedsideEffects: falseis now supported in package.jsonoptimization.splitChunksoption was introducedDetails: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
import()occur in a dead branchwebpackIncludeandwebpackExcludeare supported by the magic comment forimport(). They allow to filter files when using a dynamic expression.System.import()now emits a warningRule.parser.system: trueSystem.importwithRule.parser.system: falsemodule.rules[].resolve. It's merged with the global configuration.optimization.minimizehas been added to switch minimizing on/offoptimization.minimizerhas been added to configurate minimizers and optionswebpack-clito use the CLI--progress) now displays plugin namesFeatures
options.dependenciesconfigurations now throw errorRule.identis now allowed by schemasideEffectscan be overriden via module.rulesoutput.hashFunctioncan now be a Constructor to a custom hash functionoutput.globalObjectconfig option to allow to choose the global object reference in runtime exitCodetypeandrequest.for ofinstead offorEachMapandSetinstead of Objectsincludesinstead ofindexOftext/javascriptandasyncas this are the default values (saves a few bytes)__webpack_require__and argument is omitted.wasm,.mjs,.jsand.jsonextensions in this orderoutput.pathinfois now on by default in develoment modeentrydefaults to./srcoutput.pathdefaults to./distproductiondefaults when omiting themodeoption<{parent}>>{children}<and={siblings}=in Statsnew Foo()expressions**,&,|,^,>>>,>>,<<and~import()now emits a error instead of a warningBugfixes
*/chunkCallbackNameto the schema to allow configurating WebWorker templatemodule.id/loadednow correctly bails out of Module Concatentation (Scope Hoisting)Watching.invalidateprocess.exitand useprocess.exitCodeinsteadwebpack/hot/signal-!behavior with post loadersrunandwatchRunhooks forMultiCompilerthisis now undefined in ESMvar,constorletjavascript/dynamicorjavascript/moduleis used.Internal changes
plugincalls withtapcalls (new plugin system)buildMeta.exportsType: "default"for json modulesRemoved features
module.loadersloaderContext.optionsCompilation.notCacheableflagNoErrorsPluginDependency.isEqualResourceNewWatchingPluginCommonsChunkPluginBreaking changes for plugins/loaders
pluginmethod is backward-compatibleCompiler.hooks.xxx.tap(<plugin name>, fn)nowChunk.chunks/parents/blocksare no longer Arrays. A Set is used internally and there are methods to access it.Parser.scope.renamesandParser.scope.definitionsare no longer Objects/Arrays, but Map/Sets.StackedSetMap(LevelDB-like datastructure) instead of ArraysCompiler.optionsis no longer set while applying pluginsDependency.getReference()may now return aweakproperty.Dependency.weakis now used by theDependencybase class and returned in the base impl ofgetReference()ModulesContextModuleandresolveDependenciesCompiler.resolversintoCompiler.resolverFactoryaccessible with pluginsDependency.isEqualResourcehas been replaced withDependency.getResourceIdentifierTemplateare now staticoutputOptionsandrequestShortenerhas been moved to this classModule.metahas been replaced withModule.buildMetaModule.buildInfoandModule.factoryMetahave been addedModulehave been moved into the new objectsloaderContext.rootContextwhich points to thecontextoptions. Loaders may use it to make stuff relative to the application root.this.hotflag to loader context when HMR is enabledbuildMeta.harmonyhas been replaced withbuildMeta.exportsType: "namespaceMigration
Node.js
If you are still using Node.js 4 or smaller:
Install Node.js 8. You could also install Node.js 6 but it's slower (2x).
CLI
To use the command line interface:
or
Configuration
// webpack.production.config.js module.exports = { + mode: "production", plugins: [ - new UglifyJsPlugin(/* ... */), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), - new webpack.optimize.ModuleConcatenationPlugin(), - new webpack.NoEmitOnErrorsPlugin() ] }// webpack.development.config.js module.exports = { + mode: "development", plugins: [ - new webpack.NamedModulesPlugin(), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), ] }import()CommonJsimport()now always returns the namespace object and not the exports directly for non-ESM.Note: ESM modules are not affected.
Note: Babel transpiled ESM (
__esModule: true) will work in.jsmodules (javascript/auto), but not in.mjsmodules.Note: For JSON the same is true, but as JSON modules also export each property as exports you could pick property via destruction.
CommonsChunkPlugin
The following guides try to give 1 to 1 translations for the CommonsChunkPlugin. This does not neccessary fit bet pratices.
Best practise
You need to generate the HTML from stats json. Use the
entrypointsproperty from Stats to know which files to include for each entrypoint.Initial vendor chunk
Alternative:
Difference: This includes all used modules from node_modules and allows tree shaking.
Note: You don't need to specify a entry for the alternative.
Commons chunk
Better vendor chunk
Async commons chunk
Just omit it. The defaults already do such optimization.
Deep Children
Anything with
deepChildren: trueand noasync.See configuration above but use
chunks: "all".Loaders consuming JSON
module.rules: [ { test: /\.special\.json$/, + type: "javascript/auto", use: "special-loader" } ]The text was updated successfully, but these errors were encountered: