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.

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

Hello Webpack4 ⭐️ #324

Merged
merged 79 commits into from Jul 18, 2018
Merged
Changes from all commits
Commits
Show all changes
79 commits
Select commit Hold shift + click to select a range
022362f
Upgrading packages to Webpack 4 and replacing extract text by
weaverryan May 16, 2018
89499fd
Adding mode option
weaverryan May 16, 2018
43b6e30
Removing CommonsChunkPlugin & moving named modules logic
weaverryan May 16, 2018
9601780
upgrading all other dependencies & handling babel env changes
weaverryan May 16, 2018
a1873fc
Fixing deprecated hooks
weaverryan May 16, 2018
02dce21
Updating test: mini-css-extract extracts async chunks for css
weaverryan May 16, 2018
07add8f
[Minor] Hashes changed in the test
weaverryan May 16, 2018
f9134b2
[Minor] More test updates for now CSS async are now extracted
weaverryan May 16, 2018
dfb3611
Moving Uglify configuration
weaverryan May 16, 2018
0eac2f0
Removing old test
weaverryan May 16, 2018
c4c7aec
Updating to new babel react package
weaverryan May 16, 2018
172fb62
Completely removing CoffeeScript
weaverryan May 16, 2018
8879114
Fixing more @babel/preset-env spots
weaverryan May 16, 2018
4ec4fcb
Upgrading to latest vue-loader
weaverryan May 16, 2018
eb8005f
fixing some version strings in tests
weaverryan May 16, 2018
228d3ff
Fixing test - it was a false failure
weaverryan May 16, 2018
735bec0
Fixing test related to uglify
weaverryan May 16, 2018
7f244c4
Fixing test - internal option location changed
weaverryan May 16, 2018
5d940f0
Installing the now-required webpack-cli
weaverryan May 16, 2018
3ae0fe0
Updating our custom formatting of vue loader problems
weaverryan May 17, 2018
d91371a
enhancing createSharedEntry test
weaverryan May 17, 2018
9c9becb
Re-adding the traditional createSharedEntry functionality
weaverryan May 17, 2018
8c9405c
improving createSharedEntry test
weaverryan May 19, 2018
262c206
not using vendor, as it could conflict with built-in cache group
weaverryan May 19, 2018
3320418
Adding a warning of you accidentally override a core cache group
weaverryan May 24, 2018
51e6088
Hiding the "built at" output
weaverryan May 24, 2018
d1e9731
Fixing a babelrc change
weaverryan May 24, 2018
d31eb5d
Adding support for browserslist in package.json!
weaverryan May 28, 2018
18fd553
Adding support for configuring splitChunks.chunks to "all"
weaverryan May 29, 2018
6cc4624
fixing copy paste
weaverryan Jun 9, 2018
a2995b6
enhancing test to also test css splitting
weaverryan Jun 9, 2018
7fda6fd
Adding support for dynamic imports out-of-the-box
weaverryan Jun 9, 2018
51aade6
WIP - changing format of "features" to make room for version
weaverryan Jun 9, 2018
9a9f2b0
Renaming method for future clarity
weaverryan Jun 10, 2018
f733bb2
Adding new version-handling logic for optional dependencies
weaverryan Jun 10, 2018
81a079a
upgrading to @babel/plugin-transform-react-jsx
weaverryan Jun 10, 2018
6b17c6f
fixing reversed logic
weaverryan Jun 10, 2018
724a67d
finishing preact babel changes after upgrade
weaverryan Jun 10, 2018
05c5a24
upgrading to @babel/plugin-syntax-dynamic-import
weaverryan Jun 10, 2018
1c41070
Outputting the required version with the "yarn add" recommendations
weaverryan Jun 10, 2018
46a00df
removing failing test
weaverryan Jun 10, 2018
301bd21
Fixing new loading for the .babelrc file
weaverryan Jun 11, 2018
014c304
Fixing very old bug in tests, where the "cwd" passed to parseRuntime()
weaverryan Jun 11, 2018
097592f
updating broken test
weaverryan Jun 11, 2018
cbf478f
fixing lint
weaverryan Jun 11, 2018
bdf201a
A hacky attempt at supporting createSharedEntry()
weaverryan Jun 22, 2018
049343f
adding a test to prove shared entry code is not double-included
weaverryan Jun 23, 2018
de9568d
Omitting the _tmp_shared from the manifest & entrypoints files
weaverryan Jun 23, 2018
2cf72e0
Making shared entry working with versioning
weaverryan Jun 23, 2018
ce51d27
fixing typos
weaverryan Jun 23, 2018
2e53737
Clear errors for removed methods
weaverryan Jun 23, 2018
f3f8d09
Using semver to enforce our plugin versions a bit better
weaverryan Jun 26, 2018
9558c89
making our entry files plugin last, to catch any entry points that may
weaverryan Jun 26, 2018
ce8c0df
Verify that the runtime files are included in entrypoints.json
weaverryan Jun 26, 2018
eaebb31
moving test
weaverryan Jul 1, 2018
3b65403
Fixing entrypoints.json so that it points to the unversioned filename
weaverryan Jul 12, 2018
5ba3c11
Adding Encore.splitEntryChunks() to enable that new feature easier
weaverryan Jul 12, 2018
13d7c5b
Fixing bad function name
weaverryan Jul 13, 2018
27f3534
Fixing lint issues
weaverryan Jul 13, 2018
2573899
Fixing windows problems with \ in paths
weaverryan Jul 13, 2018
734c59a
removing support for node 7
weaverryan Jul 13, 2018
1d5786f
Fixing problems with windows slashes in our hacky "require" dumped code
weaverryan Jul 13, 2018
5b19827
*actually* removing Node 7 support
weaverryan Jul 13, 2018
fe31d7d
re-adding webpack-dev-server
weaverryan Jul 14, 2018
d7cf989
Fixing bad filename in changelog
weaverryan Jul 15, 2018
1acc67a
Changing | to ||, which is the correct format
weaverryan Jul 16, 2018
cf0192f
Automatically hashing split filenames on production
weaverryan Jul 16, 2018
55631cc
Fixing a bug where entrypoints.json contained bad names in production
weaverryan Jul 17, 2018
9d2043c
Marking methods as deprecated to help auto-completion
weaverryan Jul 17, 2018
f9a0799
Fixing a bug where runtime.js would appear for "style" entries in
weaverryan Jul 17, 2018
75ec093
Always outputting runtime.js
weaverryan Jul 17, 2018
6de05cf
preventing shared entry & split chunks from being used together
weaverryan Jul 17, 2018
20ad1bd
fixing comment
weaverryan Jul 17, 2018
7db0fcb
Adding new Encore.enableSingleRuntimeChunk() + BC layer
weaverryan Jul 17, 2018
75ea6ea
Fixing a bug where logs could break JSON output
weaverryan Jul 17, 2018
4b43766
Adding missing config in test
weaverryan Jul 17, 2018
df2a58f
Fixing a bug where async-split chunks caused undefined in
weaverryan Jul 17, 2018
3c1b790
using latest webpack-cli + updating deps
weaverryan Jul 17, 2018
ab109cd
Changing entrypoints.json values to include the manifest key prefix
weaverryan Jul 18, 2018
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -9,13 +9,16 @@ cache:
matrix:
include:
- os: linux
node_js: "7"
node_js: "10"
env: JOB_PART=travis:lint
- os: linux
node_js: "8"
node_js: "10"
env: JOB_PART=test
- os: linux
node_js: "9"
env: JOB_PART=test
- os: linux
node_js: "7"
node_js: "8"
env: JOB_PART=test
- os: linux
node_js: "6"
@@ -1,5 +1,85 @@
# CHANGELOG

## 0.21.0 Webpack 4 Upgrade

* [BC BREAK] Webpack was upgraded to version 4. This includes a number of major
and minor changes. The changes are listed below.

* [DEPRECATION] You must now call either `Encore.enableSingleRuntimeChunk()`
or `Encore.disableSingleRuntimeChunk()`: not calling either method is
deprecated. The recommended setting is `Encore.enableSingleRuntimeChunk()`.
This will cause a new `runtime.js` file to be created, which must be included
on your page with a script tag (before any other script tags for Encore
JavaScript files). See the documentation above `enableSingleRuntimeChunk()` in
`index.js` for more details.

* [BEHAVIOR CHANGE] Previously, without any config, Babel was
configured to "transpile" (i.e. re-write) your JavaScript so
that it was compatible with all browsers that currently have
more than 1% of the market share. The new default behavior
is a bit more aggressive, and may rewrite even more code to
be compatible with even older browsers. The *recommendation*
is to add a new `browserslist` key to your `package.json` file
that specifies exactly what browsers you need to support. For
example, to get the old configuration, add the following to
`package.json`:

```json
{
"browserslist": "> 1%"
}
```

See the [browserslist](https://github.com/browserslist/browserslist) library
for a full description of all of the valid browser descriptions.

* Node 7 is no longer supported. This is because the new
`mini-css-extract-plugin` does not support it (and neither)
does Yarn.

* Introduced a new `configureSplitChunks()` method that can be
used to further configure the `optimizations.splitChunks` configuration.

* A new `entrypoints.json` file is now always output. For expert
use-cases, the `optimizations.splitChunks.chunks` configuration
can be set via `configureSplitChunks()` to `all`. Then, you
can write some custom server-side code to parse the `entrypoints.js`
so that you know which `script` and `link` tags are needed for
each entry.

* The "dynamic import" syntax is now supported out of the box
because the `@babel/plugin-syntax-dynamic-import` babel plugin
is always enabled. This allows you to do "Dynamic Imports"
as described here: https://webpack.js.org/guides/code-splitting/#dynamic-imports

* For Preact, the necessary plugin the user needs to install
changed from `babel-plugin-transform-react-jsx` to `@babel/plugin-transform-react-jsx`.

* The NamedModulesPlugin was removed.

* The `babel-preset-env` package (which was at version ^1.2.2) was
removed in favor of `@babel/preset-env`.

* ExtractTextPlugin was removed and replaced with
mini-css-extract-plugin. Accordingly, `extractTextPluginOptionsCallback()`
was removed.

* Support for CoffeeScript was entirely removed.

* A new "version check" system was added for optional dependencies.
Now, when you install optional plugins to support a feature, if
you are using an unsupported version, you will see a warning.
"Package recommendation" errors (i.e. when you enable a feature
but you are missing some packages) will also contain the version
in the install string when necessary (e.g. `yarn add foo@^2.0`).

* Actual lang="sass" no longer works for Vue. However, lang="scss"
continues to work fine.

* uglifyjs-webpack-plugin was upgraded from 0.4.6 to 1.2.5, which
includes using `uglify-es`. If you're using `configureUglifyJsPlugin`(),
the options have changed.

## 0.20.1

* Upgraded webpack-manifest-plugin from 2.0.0 RC1 to ^2.0.0.
@@ -13,14 +13,20 @@
const parseRuntime = require('../lib/config/parse-runtime');
const context = require('../lib/context');
const chalk = require('chalk');
const logger = require('../lib/logger');

const runtimeConfig = parseRuntime(
require('yargs/yargs')(process.argv.slice(2)).argv,
process.cwd()
);
context.runtimeConfig = runtimeConfig;

// remove the command from the output
// prevent logs from being dumped
if (runtimeConfig.outputJson) {
logger.quiet();
}

// remove the command from the input
process.argv.splice(2, 1);

if (!runtimeConfig.isValidCommand) {
@@ -0,0 +1 @@
document.getElementById('app').innerHTML = document.getElementById('app').innerHTML + 'Welcome to Encore!';
@@ -0,0 +1,4 @@
// use code splitting via a dynamic import
import('./print_to_app_export').then(printToApp => {
printToApp.default();
});

This file was deleted.

@@ -0,0 +1 @@
document.getElementById('app').innerHTML = 'Welcome to Encore!';
@@ -0,0 +1,3 @@
export default function() {
document.getElementById('app').innerHTML = 'Welcome to Encore!';
}
@@ -0,0 +1 @@
require('./arrow_function');
@@ -0,0 +1,5 @@
// used in a createdSharedEntry() test
require('./no_require');
require('./requires_arrow_function');
require('./../css/h1_style.css');
require('./print_to_app');
@@ -38,11 +38,6 @@ export default {
}
</style>

<style lang="sass">
#app
color: #2c3e90
</style>

<style lang="less">
#app {
margin-top: 40px;
160 index.js
@@ -123,25 +123,6 @@ class Encore {
return this;
}

/**
* Allows you to configure the options passed to the extract-text-webpack-plugin.
* A list of available options can be found at https://github.com/webpack-contrib/extract-text-webpack-plugin
*
* For example:
*
* Encore.configureExtractTextPlugin((options) => {
* options.ignoreOrder = true;
* })
*
* @param {function} extractTextPluginOptionsCallback
* @returns {Encore}
*/
configureExtractTextPlugin(extractTextPluginOptionsCallback = () => {}) {

This comment has been minimized.

Copy link
@Lyrkan

Lyrkan Jun 16, 2018

Collaborator

Maybe we could also do something in the EncoreProxy at the bottom of that file to detect when a user tries to call configureExtractTextPlugin or enableCoffeeScriptLoader and display some kind of "This method is not available anymore in Webpack Encore" error message instead of the default one?

webpackConfig.configureExtractTextPlugin(extractTextPluginOptionsCallback);

return this;
}

/**
* Allows you to configure the options passed to the friendly-errors-webpack-plugin.
* A list of available options can be found at https://github.com/geowarin/friendly-errors-webpack-plugin
@@ -201,13 +182,17 @@ class Encore {

/**
* Allows you to configure the options passed to the uglifyjs-webpack-plugin.
* A list of available options can be found at https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6
* A list of available options can be found at https://github.com/webpack-contrib/uglifyjs-webpack-plugin
*
* For example:
*
* Encore.configureUglifyJsPlugin((options) => {
* options.compress = false;
* options.beautify = true;
* options.cache = true;
* options.uglifyOptions = {
* output: {
* comments: false
* }
* }
* })
*
* @param {function} uglifyJsPluginOptionsCallback
@@ -225,7 +210,7 @@ class Encore {
* // final output file will be main.js in the output directory
* Encore.addEntry('main', './path/to/some_file.js');
*
* If the JavaScript file imports/requires CSS/SASS/LESS files,
* If the JavaScript file imports/requires CSS/Sass/LESS files,
* then a CSS file (e.g. main.css) will also be output.
*
* @param {string} name The name (without extension) that will be used
@@ -407,14 +392,98 @@ class Encore {
}

/**
* Add a "commons" file that holds JS shared by multiple chunks.
* Add a "commons" file that holds JS shared by multiple chunks/files.
*
* @param {string} name The chunk name (e.g. vendor to create a vendor.js)
* @param {string|Array} files Array of files to put in the vendor entry
* @param {string} file A file whose code & imports should be put into the shared file.
* @returns {Encore}
*/
createSharedEntry(name, files) {
webpackConfig.createSharedEntry(name, files);
createSharedEntry(name, file) {
webpackConfig.createSharedEntry(name, file);

return this;
}

/**
* Tell Webpack to output a separate runtime.js file.
*
* This file must be included via a script tag before all
* other JavaScript files output by Encore.
*
* The runtime.js file is useful when you plan to include
* multiple entry files on the same page (e.g. a layout.js entry
* and a page-specific entry). If you are *not* including
* multiple entries on the same page, you can safely disable
* this - disableSingleRuntimeChunk() - and remove the extra script tags.
*
* If you *do* include multiple entry files on the same page,
* disabling the runtime.js file has two important consequences:
* A) Each entry file will contain the Webpack runtime, which
* means each contains some code that is duplicated in the other.
* B) If two entry files require the same module (e.g. jquery),
* they will receive *different* objects - not the *same* object.
* This can cause some confusion if you expect a "layout.js" entry
* to be able to "initialize" some jQuery plugins, because the
* jQuery required by the other entry will be a different instance,
* and so won't have the plugins initialized on it.
*
* @returns {Encore}
*/
enableSingleRuntimeChunk() {
webpackConfig.enableSingleRuntimeChunk();

return this;
}

/**
* Tell Webpack to *not* output a separate runtime.js file.
*
* See enableSingleRuntimeChunk() for more details.
*
* @returns {Encore}
*/
disableSingleRuntimeChunk() {
webpackConfig.disableSingleRuntimeChunk();

return this;
}

/**
* Tell Webpack to "split" your entry chunks.
*
* This will mean that, instead of adding 1 script tag
* to your page, your server-side code will need to read
* the entrypoints.json file in the build directory to
* determine the *multiple* .js (and .css) files that
* should be included for each entry.
*
* This is a performance optimization, but requires extra
* work (described above) to support this.
*
* @returns {Encore}
*/
splitEntryChunks() {
webpackConfig.splitEntryChunks();

return this;
}

/**
* Configure the optimization.splitChunks configuration.
*
* https://webpack.js.org/plugins/split-chunks-plugin/
*
* Encore.configureSplitChunks(function(splitChunks) {
* // change the configuration
*
* splitChunks.minSize = 0;
* });
*
* @param {function} callback
* @returns {Encore}
*/
configureSplitChunks(callback) {
webpackConfig.configureSplitChunks(callback);

return this;
}
@@ -654,27 +723,6 @@ class Encore {
return this;
}

/**
* Call this if you plan on loading CoffeeScript files.
*
* Encore.enableCoffeeScriptLoader()
*
* Or, configure the coffee-loader options:
*
* Encore.enableCoffeeScriptLoader(function(coffeeScriptOptions) {
* // http://coffeescript.org/#nodejs-usage
* // coffeeScriptOptions.header = true;
* });
*
* @param {function} callback
* @returns {Encore}
*/
enableCoffeeScriptLoader(callback = () => {}) {
webpackConfig.enableCoffeeScriptLoader(callback);

return this;
}

/**
* Call this to enable forked type checking for TypeScript loader
* https://github.com/TypeStrong/ts-loader/blob/v2.3.0/README.md#faster-builds
@@ -981,6 +1029,22 @@ class Encore {
runtimeConfig = null;
webpackConfig = null;
}

/**
* @deprecated
* @return {void}
*/
configureExtractTextPlugin() {
throw new Error('The configureExtractTextPlugin() method was removed from Encore. The underlying plugin was removed from Webpack 4.');
}

/**
* @deprecated
* @return {void}
*/
enableCoffeeScriptLoader() {
throw new Error('The enableCoffeeScriptLoader() method and CoffeeScript support was removed from Encore due to support problems with Webpack 4. If you are interested in this feature, please submit a pull request!');
}
}

// Proxy the API in order to prevent calls to most of its methods
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.