|
| 1 | +on: |
| 2 | + schedule: |
| 3 | + - cron: '0 */4 * * *' |
| 4 | + push: |
| 5 | + branches: |
| 6 | + - master |
| 7 | + pull_request: |
| 8 | + paths: |
| 9 | + - .github/workflows/e2e-webpack-workflow.yml |
| 10 | + - scripts/e2e-setup-ci.sh |
| 11 | + |
| 12 | +name: 'E2E Webpack' |
| 13 | +jobs: |
| 14 | + chore: |
| 15 | + name: 'Validating Webpack' |
| 16 | + runs-on: ubuntu-latest |
| 17 | + |
| 18 | + steps: |
| 19 | + - uses: actions/checkout@master |
| 20 | + |
| 21 | + - name: 'Use Node.js 10.x' |
| 22 | + uses: actions/setup-node@master |
| 23 | + with: |
| 24 | + version: 10.x |
| 25 | + |
| 26 | + - name: 'Build the standard bundle' |
| 27 | + run: | |
| 28 | + node ./scripts/run-yarn.js build:cli |
| 29 | +
|
| 30 | + - name: 'Running the integration test' |
| 31 | + run: | |
| 32 | + source scripts/e2e-setup-ci.sh |
| 33 | +
|
| 34 | + yarn init -p |
| 35 | + yarn add -D webpack@^5.0.0-alpha.24 webpack-cli@^3.3.8 lodash |
| 36 | +
|
| 37 | + # Vanilla webpack |
| 38 | + echo "const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist')} };" | tee webpack.config.js |
| 39 | +
|
| 40 | + mkdir src |
| 41 | + echo "import _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'webpack'], ' '))}; printHello();" | tee src/index.js |
| 42 | +
|
| 43 | + yarn webpack |
| 44 | + [[ "$(node dist/main.js)" = "Hello webpack" ]] |
| 45 | +
|
| 46 | + rm -rf dist src webpack.config.js |
| 47 | +
|
| 48 | + # raw-loader (imported) |
| 49 | + yarn add raw-loader |
| 50 | +
|
| 51 | + mkdir src |
| 52 | + echo 'import text from "raw-loader!./text.txt"; console.log(text);' | tee src/index.js |
| 53 | + echo 'Hello raw-loader' | tee src/text.txt |
| 54 | +
|
| 55 | + yarn webpack |
| 56 | + [[ "$(node dist/main.js)" = "Hello raw-loader" ]] |
| 57 | +
|
| 58 | + rm -rf dist src webpack.config.js |
| 59 | +
|
| 60 | + # ts-loader |
| 61 | + yarn add -D ts-loader typescript pnp-webpack-plugin @types/lodash |
| 62 | +
|
| 63 | + 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 |
| 64 | +
|
| 65 | + echo "{\"compilerOptions\": { \"noImplicitAny\": true, \"removeComments\": true, \"preserveConstEnums\": true, \"sourceMap\": true}}" | tee tsconfig.json |
| 66 | +
|
| 67 | + mkdir src |
| 68 | + echo "import * as _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'ts-loader'], ' '))}; printHello();" | tee src/index.ts |
| 69 | +
|
| 70 | + yarn webpack |
| 71 | + [[ "$(node dist/main.js)" = "Hello ts-loader" ]] |
| 72 | +
|
| 73 | + rm -rf dist src webpack.config.js tsconfig.json |
| 74 | +
|
| 75 | + # less-loader |
| 76 | + yarn add -D less less-loader css-loader style-loader file-loader bootstrap-less |
| 77 | +
|
| 78 | + 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 |
| 79 | +
|
| 80 | + mkdir src |
| 81 | + echo "import './main.less';" | tee src/index.js |
| 82 | + echo "@import '~bootstrap-less/bootstrap/index.less';@import './other.less';.box:extend(.hotpink) {width: 200px;height: 200px;}" | tee src/main.less |
| 83 | + echo ".hotpink {background: hotpink;}" | tee src/other.less |
| 84 | +
|
| 85 | + yarn webpack |
| 86 | +
|
| 87 | + ls dist | grep "main.js" |
| 88 | + ls dist | grep ".svg" |
| 89 | + ls dist | grep ".woff2" |
| 90 | +
|
| 91 | + rm -rf dist src webpack.config.js |
| 92 | +
|
| 93 | + # thread-loader, babel-loader and sass-loader (source: https://github.com/webpack-contrib/thread-loader/tree/master/example) |
| 94 | + 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 |
| 95 | +
|
| 96 | + 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 |
| 97 | + 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 |
| 98 | +
|
| 99 | + mkdir src |
| 100 | + echo "import './main.scss';" | tee src/index.js |
| 101 | + echo "@import '~bootstrap-scss'; @import './_other.scss';.box {width: 200px;height: 200px; background-color: \$base-color}" | tee src/main.scss |
| 102 | + echo "\$base-color: hotpink;" | tee src/_other.scss |
| 103 | +
|
| 104 | + yarn unplug bootstrap-scss |
| 105 | +
|
| 106 | + yarn webpack |
| 107 | + ls dist | grep "main.js" |
| 108 | +
|
| 109 | +
|
| 110 | +
|
0 commit comments