E2E Webpack #14581
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| on: | |
| schedule: | |
| - cron: '0 */4 * * *' | |
| push: | |
| branches: | |
| - master | |
| pull_request: | |
| paths: | |
| - .github/actions/prepare/action.yml | |
| - .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@v4 | |
| - uses: ./.github/actions/prepare | |
| - name: 'Vanilla Webpack' | |
| run: | | |
| source scripts/e2e-setup-ci.sh | |
| yarn init -p | |
| yarn add -D webpack webpack-cli lodash | |
| 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 info | |
| yarn webpack | |
| [[ "$(node dist/main.js)" = "Hello webpack" ]] | |
| - name: 'raw-loader' | |
| run: | | |
| source scripts/e2e-setup-ci.sh | |
| yarn init -p | |
| yarn add webpack webpack-cli 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 info | |
| yarn webpack | |
| [[ "$(node dist/main.js)" = "Hello raw-loader" ]] | |
| if: | | |
| success() || failure() | |
| - name: 'ts-loader' | |
| run: | | |
| source scripts/e2e-setup-ci.sh | |
| yarn init -p | |
| yarn add -D webpack webpack-cli ts-loader typescript @types/lodash lodash | |
| echo "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') } ]}};" | 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 info | |
| yarn webpack | |
| [[ "$(node dist/main.js)" = "Hello ts-loader" ]] | |
| if: | | |
| success() || failure() | |
| - name: 'less-loader' | |
| run: | | |
| source scripts/e2e-setup-ci.sh | |
| yarn init -p | |
| yarn add -D webpack webpack-cli 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 info | |
| yarn webpack | |
| ls dist | grep "main.js" | |
| ls dist | grep ".svg" | |
| ls dist | grep ".woff2" | |
| if: | | |
| success() || failure() | |
| - name: 'less-loader + thread-loader' | |
| run: | | |
| # Thread-loader didn't get updated to support getOptions, causing it to break w/ less-loader | |
| # Ref https://github.com/webpack-contrib/thread-loader/issues/106 | |
| exit 0 | |
| source scripts/e2e-setup-ci.sh | |
| yarn init -p | |
| yarn add -D webpack webpack-cli less less-loader css-loader style-loader file-loader bootstrap-less thread-loader | |
| 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', 'thread-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 info | |
| yarn webpack | |
| ls dist | grep "main.js" | |
| ls dist | grep ".svg" | |
| ls dist | grep ".woff2" | |
| if: | | |
| success() || failure() |