I am receiving lots of errors when trying to build my application using Webpack and have no idea what to do. I have looked around at other solutions that suggest adding things like target: 'web' and node: {fs: "empty"} to the webpack.config.prod.js but none of these have cleared the errors. Below is a selection of errors (there are about 150 in total) in the console after running sudo npm run build:
ERROR in ./~/ejs/lib/ejs.js Module not found: Error: Cannot resolve
module 'fs' in /tidee/auth_app/node_modules/ejs/lib #
./~/ejs/lib/ejs.js 47:9-22
ERROR in ./~/express/lib/request.js Module not found: Error: Cannot
resolve module 'net' in /tidee/auth_app/node_modules/express/lib #
./~/express/lib/request.js 18:11-25
ERROR in ./~/node-pre-gyp/lib/node-pre-gyp.js Module not found: Error:
Cannot resolve 'file' or 'directory' ../package in
/tidee/auth_app/node_modules/node-pre-gyp/lib #
./~/node-pre-gyp/lib/node-pre-gyp.js 60:16-37
ERROR in ./~/ps-tree/index.js Module not found: Error: Cannot resolve
module 'child_process' in /tidee/auth_app/node_modules/ps-tree #
./~/ps-tree/index.js 3:12-36
Below is my webpack.config.prod.js file:
const path = require('path');
var webpack = require("webpack");
var CompressionPlugin = require('compression-webpack-plugin');
const pkg = require("./package.json");
module.exports = {
entry: {
vendor: Object.keys(pkg.dependencies).filter(function (v) {
return v;
}),
app: path.join(__dirname, '/client/src/app.jsx')
},
output: {
path: path.join(__dirname, '/client/dist'),
filename: '[name].js',
publicPath: 'http://example.com/public/'
},
resolve: {
root: path.resolve('./client/dist'),
extensions: ['', '.js', '.jsx', '.less', '.css'],
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
},
module: {
loaders: [{
test: /\.js?$/,
loaders: ['babel'],
include: path.join(__dirname, '/shared')
},{
test: /\.jsx?$/,
loaders: ['react-hot','babel?' + JSON.stringify({
presets: ["es2015", "stage-0", "react"]
})],
include: path.join(__dirname, '/client/src')
},{
test: /\.less$/,
loaders: ['style', 'css', 'less']
},{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.ico$/,
loader: "file-loader"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},{
test: /\.json$/,
loader: "json-loader"
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
'global.jQuery': 'jquery'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({ 'typeof window': '\"object\"' }),
new webpack.optimize.DedupePlugin(), //dedupe similar code
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
};
Note: I am using Node v7.2.1 and Webpack v1.14.0
Related
I'm trying to call a background URL in an scss file but webapack give me an error of compilation.
My project structur is :
dist
bundle.js
main.css
src
public
assets
css
scss
components
myfile.scss (insid components)
main.scss
img
js
index.html
app.js
webpack.config.js
This is the code which contains the error:
&:after{
content:"";
background: url('./../../../img/curve3.png') 100%;
position: absolute;
bottom:0;
left: 0;
right: 0;
height: 170px;
}
This is what I got from the webpack console:
ERROR in ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url->loader!./node_modules/postcss-loader/src??postcss!./node_modules/sass->loader/lib/loader.js!./src/public/assets/css/scss/main.scss)
Module not found: Error: Can't resolve './../../../img/curve3.png' >in >'/Users/retinas/Documents/Devloppement/static/um6/src/public/assets/css>/scss'
# ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url->loader!./node_modules/postcss-loader/src??postcss!./node_modules/sass->loader/lib/loader.js!./src/public/assets/css/scss/main.scss) 23:42-78
My webpack config :
const path = require('path');
const dev = process.env.NODE_ENV === 'dev';
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/app.js",
watch: dev,
devServer: {
contentBase: path.resolve('./'),
publicPath: '/assets/',
port: 3000
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
module : {
rules : [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'eslint-loader',
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{ loader: 'css-loader?url=false', options: { importLoaders: 1 } },
{ loader: 'resolve-url-loader' },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('autoprefixer')({
browsers : ['last 2 versions', 'ie > 8']
}),
]
}
},
'sass-loader'
]
})
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: [
new ExtractTextPlugin({
filename : '[name].css',
disable : dev
}),
]
}
Thanks for your help
Finally, I found the solution of the problem, it was in the URL path it should be like this:
background: url('./../../img/curve3.png') 100%;
not this :
background: url('./../../../img/curve3.png') 100%;
I should began from the main.scss not from myfile.scss
Thanks.
The problem
Im using webpack 4 to compile scss to css and MiniCssExtractPlugin to save the css into a different file. The problem is, that i dont manage to load images and fonts, that are included via url() inside of the scss files. It also makes no difference between running development or production.
Scss is compiled perfectly and without any problems. Also the scss-loader has no problems loading .scss-files from node_modules.
Why does this error occur and how can i fix it?
error-message when running npm
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336881-336921
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336799-336840
And multiple more, but all have the same error, just the filename changes.
webpack-Config
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
// js: './ui/index.js',
sass: './ui/index.scss'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app')
},
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'ui/js/')
},
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if(!/node_modules/.test(loader_path)) {
return "app/images/[name].[ext]?[hash]";
}
return (
"app/images/vendor/" +
loader_path.replace(/\\/g, "/")
.replace(/((.*(node_modules))|images|image|img|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
},
{
test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if (!/node_modules/.test(loader_path)) {
return 'app/fonts/[name].[ext]?[hash]';
}
return (
'app/fonts/vendor/' +
loader_path
.replace(/\\/g, '/')
.replace(/((.*(node_modules))|fonts|font|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
}
]
},
performance: {
hints: false
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
}
Project Repo/Branch
You need to add resolve-url-loader to your build, like this:
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
}
resolve-url-loader is resolving paths to assets based on the original file that is importing the asset.
I tried it locally and the build is now passing :) Cheers!
I am working on an AngularJS Project to configure webpack for bundling purpose. I am using webpack4 for the same.
Below is the config file.
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');// Require html-webpack-plugin plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractNormalCSS = new ExtractTextPlugin("./src/main/frontend/sass/main.scss");
const extractCSS = new ExtractTextPlugin('/src/main/frontend/assets/icons/paas-icons/style.css');
module.exports = {
entry: [ "./src/main/frontend/app/app.js","./src/main/frontend/sass/main.scss"], // webpack entry point. Module to start building dependency graph
output: {
path: path.join(__dirname, '/distTemp/'), // Folder to store generated bundle
filename: '[name].bundle.js' // Name of generated bundle after build
//publicPath: '' // public URL of the output directory when referenced in a browser
},
resolve:{
modules: [
'node_modules',
'bower_components',
'src'
],
extensions:[".js"]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
compact: false,
cacheDirectory: true,
presets: ['es2015', 'angular'],
},
},
{
test: /.(scss)$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.html$/,
loader: 'html-loader?name=views/[name].[ext]'
},
{
test: /\.(png|jpg)$/,
use: [
'url-loader?limit=8192'
]
},
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: false
},
sourceMap: true
})
],
splitChunks: {
cacheGroups: {
commons: {
test: /node_modules/,
name: 'vendor',
chunks: 'all'
}
}
}
},
plugins: [ // Array of plugins to apply to build chunk
new HtmlWebpackPlugin({
template: "./src/main/frontend/index.html",
inject: 'body'
}),
new ExtractTextPlugin('/distTemp/style/style.css'),
ExtractNormalCSS,
extractCSS
],
devServer: { // configuration for webpack-dev-server
contentBase: '.src/main/frontend/assets', //source of static assets
port: 7700, // port to run dev-server
}
};
Upon building, I am getting the error mentioned below.
ERROR in ./src/main/frontend/sass/main.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/main/frontend/sass/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
var path = require("path");
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in ###/node_modules/bourbon/index.js (line 1, column 1)
Error:
var path = require("path");
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in ###/node_modules/bourbon/index.js (line 1, column 1)
at options.error (###/node_modules/node-sass/lib/index.js:291:26)
# ./src/main/frontend/sass/main.scss 2:14-134
# multi ./src/main/frontend/app/app.js ./src/main/frontend/sass/main.scss
I am using sass-loader and node-sass for the .scss files.
The main.scss file contains imports for the rest of the style files.
Could someone assist me in resolving this error please?
The 'serverRenderer is not a function' error pops us in development when adding webpack-hot-server-middleware. Below is my express.js and config/webpack.dev-ssr.js. Some issues on Github suggested webpack-hot-server-middleware loads before the compiler returns but I don't know how to verify that.
express.js:
import express from 'express';
import webpack from 'webpack';
import webpackHotServerMiddleware from 'webpack-hot-server-middleware';
import configDevClient from '../../config/webpack.dev-client'
import configDevSsr from '../../config/webpack.dev-ssr'
import configProdClient from '../../config/webpack.prod-client'
import configProdSsr from '../../config/webpack.prod-ssr'
const server = express()
const isDev = process.env.NODE_ENV !== 'production'
if (isDev) {
const compiler = webpack([configDevClient, configDevSsr])
const clientDevCompiler = compiler.compilers[0]
const ssrDevCompiler = compiler.compilers[1]
const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, configDevClient.devServer)
const webpackHotMiddleware = require('webpack-hot-middleware')(clientDevCompiler, configDevClient.devServer)
server.use(webpackDevMiddleware)
server.use(webpackHotMiddleware)
// out of const compiler webpack-hot-server-middleware will take compiler with `name: 'server'`
server.use(webpackHotServerMiddleware(compiler))
} else {
webpack([configProdClient, configProdSsr]).run((err, stats) => {
// const staticMiddleware = express.static('dist')
// server.use(staticMiddleware)
const render = require('./render')
// const render = require('../../build/prod-ssr.bundle.js').default
const expressStaticGzip = require('express-static-gzip') // Heroku doesn't support gzip on Heroku server level
server.use(expressStaticGzip('dist', { enableBrotli: true }))
server.use(render())
})
}
const port = process.env.PORT || 8080
server.listen(port, () => console.log(`Server's running on http://localhost:${port}.`));
webpack.dev-ssr.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const nodeExternals = require('webpack-node-externals');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
name: 'server', // preset name for webpack-hot-server-middleware
entry: {
server: './src/server/render'
},
resolve: {
extensions: ['.js'] // add extensions to entry files above
},
mode : 'production',
output : {
filename : 'dev-ssr.bundle.js',
path : path.resolve(__dirname, '../build'),
libraryTarget: 'commonjs2'
},
// for Node leave all required (with require()) modules as is don't put them to main.bundle.js like for browser
target: 'node',
/* Webpack allows to define externals - modules that should not be bundled.
When bundling with Webpack for the backend you usually don't want to bundle its node_modules dependencies.
This library creates an externals function that ignores node_modules when bundling in Webpack.
All Node modules will no longer be bundled but will be left as require('module'). */
externals: nodeExternals(),
/* optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
minChunks: 2
}
}
}
}, */
devtool: 'source-map',
module : {
rules: [
{
test : /\.js$/,
use : [
{ loader: 'babel-loader' }
],
exclude: /node_modules/
},
{
test : /\.ts$/,
use : [
{ loader: 'awesome-typescript-loader' }
],
exclude: /node_modules/
},
{
test: /\.css$/,
use : [
{
loader: MiniCssExtractPlugin.loader
},
{
loader : 'css-loader',
options: {
sourceMap: true // won't work: no separate css file. Styles come from main.bundle.js
// minimize: true
}
}
]
},
{
test: /\.sass$/,
use : [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
]
},
{
test: /\.styl$/,
use : [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'stylus-loader' }
]
},
{
test: /\.less$/,
use : [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
},
{
test: /\.html$/,
use : [
// job of two below modules are done by HtmlWebpackPlugin
/* {
loader: 'file-loader',
options: {
name: '[name].html' // output file name
}
},
{ // extract-loader puts the tested /\.html$/ file to a separate file not adds it to main.bundle.js
// extract loader parses the javascript back to an html file
loader: 'extract-loader'
}, */
// html-loader was left cause it exports tested html file as string to src/main.js
{
loader : 'html-loader', // exports tested html file to main.bundle.js as string and lints it
options: {
attrs: ['img:src'] // to add img:src to output file and require all images from its folder
}
// html template implicitly turns <img src='...' /> in .html page to <img src='require(src)' />
}
]
},
{
test: /\.pug$/,
use : [
{ loader: 'pug-loader' }
]
},
{
test: /\.hbs$/,
use : [
{
loader: 'handlebars-loader',
query : {
// hbs template implicitly turns <img src='...' /> in .hbs page to <img src='require(src)' />
inlineRequires: '/images/'
}
}
]
},
{
test: /\.(png|svg|gif|jpe?g)$/,
use : [
{
loader : 'file-loader',
options: {
name: '/images/[name].[hash:8].[ext]', // still emits not the file but its path
emitFile: false
}
}
]
},
{
test: /\.md$/,
use: [
/* { loader: 'html-loader' },
// markdown loader using 'marked' package. 'Marked' outputs HTML, it's best served with html-loader
{ loader: 'markdown-loader' } */
{ loader: 'markdown-with-front-matter-loader' }
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
]
};
The full repo is at https://github.com/ElAnonimo/webpack4
Missed the publicPath: '/' in the output section of '../../config/webpack.dev-client'.
Another possible reason and solution for this error is in the issue https://github.com/faceyspacey/react-universal-component/issues/148
Check this github issue
webpack explicit --mode may be affected your issue
https://github.com/webpack-contrib/webpack-hot-middleware/issues/255#issuecomment-375603384
I've migrated an already started project into a more structured format and am trying to make Webpack run all of the tests in the shell using Mocha. I'm very new to Webpack and task running in general, so most of my attempts have been copy/paste-based. (Really DRY of me, I know...)
TL; DR
I need to run my mocha/chai based tests, written in TypeScript, from Webpack during development. Bundling all tests and assets together into a single file messes with dependencies and mocha-webpack doesn't seem to find any of the files.
All suggestions are appreciated, I just need to be able to run my tests.
Unsuccessful efforts
I have tried to bundle all of the tests and different classes together after transpiling them and then running Mocha on that file, but I only get nasty dependency errors by doing this, such as:
ERROR in ./src/test/unit/cell-factory.test.ts
Module not found: Error: Can't resolve '../../assets/js/shape_module/t-shape' in '/mnt/d/Development/hestraplattan/src/test/unit'
resolve '../../assets/js/shape_module/t-shape' in '/mnt/d/Development/hestraplattan/src/test/unit'
using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/test/unit)
after using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/test/unit)
using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/assets/js/shape_module/t-shape)
no extension
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape doesn't exist
.js
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.js doesn't exist
.json
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.json doesn't exist
as directory
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape doesn't exist
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.js]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.json]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape]
# ./src/test/unit/cell-factory.test.ts 11:16-63
# ./src object Object
# ./.tmp/mocha-webpack/415d1b658d94fc3dead3d418955249ea-entry.js
Webpack bundling and testing config:
var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
var WebpackShellPlugin = require('webpack-shell-plugin');
var config = {
entry: [
'./src/test/all-tests.js',
'./src/assets/js/all-assets.js'
],
output: {
path: path.resolve(__dirname, './dist/tests'),
filename: 'testBundle.js'
},
target: 'node',
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
],
},
externals: [nodeExternals()],
node: {
fs: 'empty'
},
plugins: [
new WebpackShellPlugin({
onBuildExit: "mocha ./dist/tests/testBundle.js"
})
]
};
module.exports = config;
The files "all-tests.ts" and "all-assets.ts" exports all .ts-files in the current and subdirectories:
var context = require.context('./', true, /\.ts$/);
context.keys().forEach(context);
module.exports = context;
I also tried using Mocha Webpack and following this angular testing guide to see if that would work. The problem here is that I don't seem to get any of my tests run...
Webpack config for test with mocha webpack:
module.exports = {
devtool: 'cheap-module-source-map',
resolve: {
extensions: ['.ts', '.js']
},
resolveLoader: {
moduleExtensions: ['-loader'] // To bypass mocha-loader incompatibility with webpack :
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [/*'istanbul-instrumenter-loader',*/ 'ts-loader' ]
},
{
test: /\.ts$/,
include: '/mnt/d/development/hestraplattan/src/test',
loaders: [
{
loader: 'ts-loader',
options: {configFileName: '/mnt/d/development/hestraplattan/tsconfig.json'}
}
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'raw-loader'
}
]
},
performance: {
hints: false
}
};
Webpack node test config for running in shell:
var webpackMerge = require('webpack-merge')
var nodeExternals = require('webpack-node-externals')
var webpackTestConfig = require('./webpack.test.config')
module.exports = webpackMerge(webpackTestConfig, {
target: 'node',
externals: [
nodeExternals()
]
});
Mocha webpack opts:
--webpack-config ./webpack.test.node.js
src/test/*.test.ts
Result:
$ mocha-webpack --opts ./mocha-webpack.opts
no files found and 0 passing
So I finally managed to get to a solution:
I managed to clean up my mocha-webpack attempt to the following code:
webpack.test.config
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-source-map',
resolve: {
extensions: ['.ts', '.js']
},
resolveLoader: {
moduleExtensions: ['-loader'] // To bypass mocha-loader incompatibility with webpack :
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
configFileName: path.resolve(__dirname, 'tsconfig.json')
},
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'raw-loader'
}
]
},
performance: {
hints: false
}
};
And then I merged it with the node-config to exclude all node-modules.
The script for running mocha-webpack:
mocha-webpack --opts ./mocha-webpack.opts || true
Where true is for ignoring npm error messages if any tests fail and throw errors.
And lastly the mocha-webpack.opts for those who are interested:
--colors
--webpack-config ./webpack.test.node.js
src/**/*.test.ts
Hope this will help those of you out there wanting to run your non-DOM unit tests on the command line instead of in the browser!