Add webpack e2e tests

.github/workflows/e2e-webpack-workflow.yml

@@ -0,0 +1,110 @@
+on:
+  schedule:
+  - cron: '0 */4 * * *'
+  push:
+    branches:
+    - master
+  pull_request:
+    paths:
+    - .github/workflows/e2e-webpack-workflow.yml
+    - scripts/e2e-setup-ci.sh
+
+name: 'E2E Webpack'
+jobs:
+  chore:
+    name: 'Validating Webpack'
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@master
+
+    - name: 'Use Node.js 10.x'
+      uses: actions/setup-node@master
+      with:
+        version: 10.x
+
+    - name: 'Build the standard bundle'
+      run: |
+        node ./scripts/run-yarn.js build:cli
+
+    - name: 'Running the integration test'
+      run: |
+        source scripts/e2e-setup-ci.sh
+
+        yarn init -p
+        yarn add -D webpack@^5.0.0-alpha.24 webpack-cli@^3.3.8 lodash
+
+        # Vanilla webpack
+        echo "const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist')} };" | tee webpack.config.js
+
+        mkdir src
+        echo "import _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'webpack'], ' '))}; printHello();" | tee src/index.js
+
+        yarn webpack
+        [[ "$(node dist/main.js)" = "Hello webpack" ]]
+
+        rm -rf dist src webpack.config.js
+
+        # raw-loader (imported)
+        yarn add raw-loader
+
+        mkdir src
+        echo 'import text from "raw-loader!./text.txt"; console.log(text);' | tee src/index.js
+        echo 'Hello raw-loader' | tee src/text.txt
+
+        yarn webpack
+        [[ "$(node dist/main.js)" = "Hello raw-loader" ]]
+
+        rm -rf dist src webpack.config.js
+
+        # ts-loader
+        yarn add -D ts-loader typescript pnp-webpack-plugin @types/lodash
+
+        echo "const PnpWebpackPlugin = require('pnp-webpack-plugin'); module.exports = {mode: 'none', entry: './src/index.ts',output: { filename: 'main.js'}, resolve: { extensions: ['.ts', '.tsx', '.js']},module: { rules: [ { test: /\.tsx?$/, loader: require.resolve('ts-loader'),options: PnpWebpackPlugin.tsLoaderOptions({/* ... regular options go there ... */}) }  ]}};" | tee webpack.config.js
+
+        echo "{\"compilerOptions\": {  \"noImplicitAny\": true,  \"removeComments\": true,  \"preserveConstEnums\": true,  \"sourceMap\": true}}" | tee tsconfig.json
+
+        mkdir src
+        echo "import * as _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'ts-loader'], ' '))}; printHello();" | tee src/index.ts
+
+        yarn webpack
+        [[ "$(node dist/main.js)" = "Hello ts-loader" ]]
+
+        rm -rf dist src webpack.config.js tsconfig.json
+
+        # less-loader
+        yarn add -D less less-loader css-loader style-loader file-loader bootstrap-less
+
+        echo "const path = require('path'); module.exports = { mode: 'none', entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] } ] } }; " | tee webpack.config.js
+
+        mkdir src
+        echo "import './main.less';" | tee src/index.js
+        echo "@import '~bootstrap-less/bootstrap/index.less';@import './other.less';.box:extend(.hotpink) {width: 200px;height: 200px;}" | tee src/main.less
+        echo ".hotpink {background: hotpink;}" | tee src/other.less
+
+        yarn webpack
+
+        ls dist | grep "main.js"
+        ls dist | grep ".svg"
+        ls dist | grep ".woff2"
+
+        rm -rf dist src webpack.config.js
+
+        # thread-loader, babel-loader and sass-loader (source: https://github.com/webpack-contrib/thread-loader/tree/master/example)
+        yarn add -D thread-loader babel-loader  @babel/core babel-preset-env @babel/plugin-proposal-object-rest-spread node-sass sass-loader css-loader style-loader react lodash-es bootstrap-scss
+
+        echo "const path = require('path'); const threadLoader = require('thread-loader'); module.exports = (env = { threads: 0, watch: true }) => { const workerPool = { workers: +env.threads, poolTimeout: env.watch ? Infinity : 2000 }; const workerPoolSass = { workers: +env.threads, workerParallelJobs: 2, poolTimeout: env.watch ? Infinity : 2000 }; if (+env.threads > 0) { threadLoader.warmup(workerPool, ['babel-loader', 'babel-preset-env']); threadLoader.warmup(workerPoolSass, ['sass-loader', 'css-loader']); } return { mode: 'none', context: __dirname, entry: ['./src/index.js', 'react', 'lodash-es'], output: { path: path.resolve('dist'), filename: 'main.js' }, module: { rules: [ { test: /\.js$/, use: [ env.threads !== 0 && { loader: threadLoader.loader, options: workerPool }, 'babel-loader' ].filter(Boolean) }, { test: /\.scss$/, use: [ 'style-loader', env.threads !== 0 && { loader: threadLoader.loader, options: workerPoolSass }, 'css-loader', 'sass-loader' ].filter(Boolean) } ] }, stats: { children: false } }; };" | tee webpack.config.js
+        echo "{\"presets\": [[\"env\", {\"useBuiltIns\": true, \"targets\": {\"node\": \"6.9.0\"}, \"exclude\": [\"transform-async-to-generator\", \"transform-regenerator\"]}]], \"plugins\": [[\"@babel/plugin-proposal-object-rest-spread\", {\"useBuiltIns\": true}]], \"env\": {\"test\": {\"presets\": [\"env\"], \"plugins\": [\"@babel/plugin-proposal-object-rest-spread\"]}}} " | tee .babelrc
+
+        mkdir src
+        echo "import './main.scss';" | tee src/index.js
+        echo "@import '~bootstrap-scss'; @import './_other.scss';.box {width: 200px;height: 200px; background-color: \$base-color}" | tee src/main.scss
+        echo "\$base-color: hotpink;" | tee src/_other.scss
+
+        yarn unplug bootstrap-scss
+
+        yarn webpack
+        ls dist | grep "main.js"
+
+
+

README.md

@@ -46,6 +46,7 @@ On top of our classic integration tests, we also run Yarn every day against the
 | | | [Jest](https://github.com/yarnpkg/berry/blob/master/.github/workflows/e2e-jest-workflow.yml) | [![](https://github.com/yarnpkg/berry/workflows/E2E%20Jest/badge.svg)]() |
 | | | [Mocha](https://github.com/yarnpkg/berry/blob/master/.github/workflows/e2e-mocha-workflow.yml) | [![](https://github.com/yarnpkg/berry/workflows/E2E%20Mocha/badge.svg)]() |
 | | | [TypeScript](https://github.com/yarnpkg/berry/blob/master/.github/workflows/e2e-typescript-workflow.yml) | [![](https://github.com/yarnpkg/berry/workflows/E2E%20TypeScript/badge.svg)]() |
+| | | [Webpack](https://github.com/yarnpkg/berry/blob/master/.github/workflows/e2e-webpack-workflow.yml) | [![](https://github.com/yarnpkg/berry/workflows/E2E%20Webpack/badge.svg)]() |
 
 ## Build your own bundle