Using Webpack's Coffee-Loader without explicitly stating ".coffee" file extension - build

preface
I am currently switching our build process over from Browserify to Webpack. As the project uses a great deal of coffee-script, I have many import statements such as:
require('./coffee-file-without-extension') # note the lack of .coffee
require('./legacy-js-file-without-extension') # note the lack of .js
problem
Browserify handles the absence of the file extension just fine. Webpack seems to have issue per this error:
Module not found: Error: Can't resolve './wptest-req' in '/Users/jusopi/Dev/Workspaces/nx/nx-ui/src'
I setup a super simple test project for this where I have the following files:
wptest.coffee
require('./wptest-req')
wptest-req.coffee
module.exports = {}
webpack.config.js
const path = require('path');
const webpack = require('webpack')
module.exports = {
entry: {
main: './src/wptest.coffee'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
})
],
module: {
rules: [
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader',
options: { sourceMap: true }
}
]
}
]
}
};
end-goal
I am hoping I do not have to go over every file in our application and append .coffee to all require statements for coffee files if at all possible.

While this solution is not specific to coffee-loader, it did resolve my issue. I needed to add a resolve object to my configuration:
const path = require('path');
const webpack = require('webpack')
module.exports = {
entry: {
main: './src/main.coffee'
// other: './src/index2.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
})
],
module: {
rules: [
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader',
options: { sourceMap: true }
}
]
}
]
},
resolve: {
extensions: [ '.coffee', '.js' ]
}
};
src - https://github.com/webpack-contrib/coffee-loader/issues/36

Related

Serverless+Webpack: include .pem files in ZIP

I try to deploy my lambda function to AWS using serverless. Everything works fine but the function cannot be executed because two files are not found (thats what fs.readFileSync says). I include them with the following lines in the serverless.yml:
provider:
name: aws
runtime: nodejs10.x
stage: dev
region: eu-central-1
package:
exclude:
- .env
include:
- src/config/push-cert.pem
- src/config/push-key.pem
When I look in the .zip file which is uploaded to S3, both .pem files are not included. I already tried using __dirname to get the complete file path on the lambda function.
My webpack.config.js looks as following:
const path = require("path");
const nodeExternals = require("webpack-node-externals");
const slsw = require("serverless-webpack");
module.exports = {
entry: slsw.lib.entries,
target: "node",
node: {
__dirname: true
},
mode: slsw.lib.webpack.isLocal?"development":"production",
externals: [nodeExternals()],
output: {
libraryTarget: "commonjs",
// pay attention to this
path: path.join(__dirname, ".webpack"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
// ... and this
presets: [["#babel/env", {targets: {node: "8.10"}}]],
plugins: [
"#babel/plugin-proposal-object-rest-spread"
]
}
}
]
},
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: "graphql-tag/loader"
}
]
}
};
Can someone of you help?
Cheers!
Since serverless-webpack does the packing for you and not the serverless framework, you'll need to use a Webpack plugin:
const path = require("path");
const nodeExternals = require("webpack-node-externals");
const slsw = require("serverless-webpack");
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
entry: slsw.lib.entries,
target: "node",
node: {
__dirname: true
},
mode: slsw.lib.webpack.isLocal?"development":"production",
externals: [nodeExternals()],
plugins: [
new CopyPlugin([
{ from: 'src/config/push-cert.pem', to: 'push-cert.pem' },
{ from: 'src/config/push-key.pem', to: 'push-key.pem' },
]),
],
output: {
libraryTarget: "commonjs",
// pay attention to this
path: path.join(__dirname, ".webpack"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
// ... and this
presets: [["#babel/env", {targets: {node: "8.10"}}]],
plugins: [
"#babel/plugin-proposal-object-rest-spread"
]
}
}
]
},
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: "graphql-tag/loader"
}
]
}
};
As mentioned by #hephalump it is better to use AWS Secrets Manager (or Parameter Store/Environment variables).
Although you can definitely include your certificate files as part of your deployment package, and without more info I’m not certain why they’re not being included, a more secure method would be to store your certificate/key in AWS Secrets Manager, and then access that secret in your Lambda.
You can learn more about AWS Secrets Manager here, and there is a tutorial to store and retrieve a secret here.

webpack4 mini-css-extract-plugin with bourbon

I have my scss file which imports a scss file which further imports bourbon and bourbon-neat. I even searched various issues on the forum but did not find the issue where in the scsss to css conversion, the case is to include bourbon.
webpack 4.28.1
mini-css-extract-plugin 0.5.0
I am seeing the following error:
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/lib/loader.js??ref--5-2!src/component/styles/main.scss:enter code here
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js?!./src/component/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/main.scss 373 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./src/component/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/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 /Users/../node_modules/bourbon/index.js (line 1, column 1)
My webpack.config.js file is here
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
"app": ['whatwg-fetch',"./src/component/index.ts", "./src/component/styles/main.scss"],
"app-helper": "./src/component/helpers.ts"
},
output: {
path: path.resolve(__dirname, './src/component/dist'),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "sass-loader",// compiles Sass to CSS
options: {
includePaths: [
'node_modules/bourbon/app/assets/stylesheets',
'node_modules/bourbon-neat/app/assets/stylesheets'
]
}
}
],
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './src/component/dist/output-style.css',
})
],
optimization: {
minimizer:[
new UglifyJSPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
}
}
Please provide your valuable suggestions.
This turns out to be an issue with sass-loader version 7.x . I changed sass-loader dependency back to 6.0.7 and it started working like charm. Here is the stackoverflow thread which helped
Angular 2 Node Bourbon Error

webpack 4 images in node_modules : module not found

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!

Build failure while using Webpack4 in AngularJS1.5.11

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?

Integrating Webpack testing into existing Typescript project

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!