|
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() |
