Add webpack e2e tests #441
Conversation
|
Still to add test cases for:
|
|
@arcanis I've added some more tests for less-loader, thread-loader and sass-loader. Currently MiniCssExtractPlugin isn't compatible with webpack 5 so I've just used style-loader for now. The only one I'm having trouble with is sass-loader. I can't import a module |
By the way here is the error: ERROR in ./src/main.scss (./.yarn/virtual/css-loader-virtual-2a9a3cd3b6/0/cache/css-loader-npm-3.2.0-56f126c691.zip/node_modules/css-loader/dist/cjs.js!./.yarn/virtual/sass-loader-virtual-9cc7cf97c4/0/cache/sass-loader-npm-8.0.0-0e8f54d0b9.zip/node_modules/sass-loader/dist/cjs.js!./src/main.scss)
Module build failed (from ./.yarn/virtual/sass-loader-virtual-9cc7cf97c4/0/cache/sass-loader-npm-8.0.0-0e8f54d0b9.zip/node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: /Users/will/Projects/yarn-e2e/webpack5/.yarn/cache/bootstrap-scss-npm-4.3.1-0d39af42ff.zip/node_modules/bootstrap-scss/bootstrap.scss.
on line 1 of /Users/will/Projects/yarn-e2e/webpack5/src/main.scss
>> @import "~bootstrap-scss"; |
There was a problem hiding this comment.
Awesome PR @willgriffiths ! Regarding sass-loader, I think (not 100% sure) that the problem comes from node-sass being a native dependency. Maybe it doesn't go through our virtual FS layer and thus isn't able to find / read the files 🤔
| # 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 |
There was a problem hiding this comment.
Wow 😄 Maybe we should use HEREDOC or something later on to make them easier to read 🤔
| 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 |
There was a problem hiding this comment.
I think sass (instead of node-sass) would work without unplug - but it's still nice to test node-sass, as it has 7x the number of downloads.
What's the problem this PR addresses?
#368 Add webpack e2e tests