We Keep Coding

Prevent Webpack from dropping my unused code

For example, my javascript file contains function that's only called when I press HTML button. As far as I know, Webpack will treat the function as a 'dead code' because it isn't used anywhere in javascript file and then dropped the code.
So, the question is how can I disable Webpack from dropping the dead code? (or any other way would also helpful)
For more information, I tried following this thread but still can't figure out how:
How to prevent unused code from being dropped during webpack build?
What I also already did was exporting everything inside index.js and import them in main.js along with other things like jquery and mathjs which then be compiled by Webpack. The output file has jquery, mathjs, and only console.log from main.js and general.js.
Even when I set the mode in development or none, the output file doesn't work at all.
// package.json
{
"private": true,
"devDependencies": {
"css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^4.2.2",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.7.2",
"purgecss-webpack-plugin": "^5.0.0",
"terser-webpack-plugin": "^5.3.6",
"uglify-js": "^3.17.4",
"uglifyjs-folder": "^3.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"jquery": "^3.6.3",
"mathjs": "^11.5.0"
}
}
Here's my webpack.config.js (though I don't think there's problem here):
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = [
{
mode: 'production',
module: {
rules: [
{
test: /.html$/i,
loader: "html-loader",
},
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
optimization: {
minimizer: [...,new CssMinimizerPlugin()]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.php'
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
],
},
]
Here's some part of the javascript file:
// main.js
import 'jquery';
import { evaluate } from 'mathjs';
console.log(evaluate('2+3'));
import js from './general.js';
// general.js
export let result;
export function clr() {
$('.input').text('0');
$('.result').text('0').removeClass('visible');
$('.input').addClass('highlight');
$('.result').removeClass('highlight');
return result = 0;
}
...
console.log('javascript loaded');
// output.js
// (...last part of the code, just to show that the javascript files are compiled successfully)
.......ImmutableDenseMatrix:Eb,Index:Ab,Spa:$b,Unit:Gb,SymbolNode:kN,FunctionNode:zN,Help:UN,Parser:GN}),FN.createProxy(hN),console.log("javascript loaded"),console.log($N("2+3"))})()})();
(I'm sorry if I can't explain it well. If there's something that I missing please let me know)

Webpack can't resolve #import of scss/css

I have a main Stylesheet style.scss, which I imported in my main JavaScript file script.js:
import "./style.scss";
This works great, and I could build my website that way in dev mode. Now I wanted to try and use separate Stylesheet and import them in my main stylesheet with the #import rule, like so:
#import "./blocks/SCSS/test.scss" screen and (min-width: 600px);
But now I get this error message:
ERROR in ./dev/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./dev/style.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './blocks/SCSS/test.scss' in 'D:\Art Files\Design\Eigene Projekte\WP Book Theme Dev\dev'
And I don't understand why it can't resolve it. I use modules for my JavaScript as well, which works great. But now with SCSS, it does not work at all.
I tried googling for a solution and checked out several open threads, none could help me.
Here are some I checked out on Stackoverflow:
Module build failed (from ./node_modules/postcss-loader/src/index.js)
Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
Module build failed (from ./node_modules/sass-loader/dist/cjs.js)
Webpack: getting this error: build failed (from ./node_modules/css-loader/dist/cjs.js):
My Node version was 12.18.3, where I had the error first. Now I updated my node to the LTS to 14.15.4, still the same error.
Here are my Webpack config files:
// webpack.common.js
const path = require("path");
module.exports = {
entry: "./dev/script.js",
module: {
rules: [
{
test: /\.html$/i,
use: ["html-loader"],
},
{
test: /\.(svg|png|jpg)$/i,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[hash].[ext]",
outputPath: "assets/images",
},
},
},
],
},
};
// webpack.dev.js
const path = require("path");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, {
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: "./dev/post.html",
}),
],
module: {
rules: [
{
test: /\.scss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
devServer: {
contentBase: "./dist",
},
output: {
filename: "script.dev.js",
path: path.resolve(__dirname, "dist"),
publicPath: "./",
},
});
Here are my webpack dependencies:
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.3",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass": "^1.32.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.1",
"webpack-merge": "^5.7.3"
},

This is what I did to fix my problem. Amaresh already mentioned something, about what I might be missing, but that didn't help me out with my problem, as I was given no real explanation on why that would help.
In the end, I did install sass*, and since node-sass is deprecated, I didn't pay any mind to it.
The way I used #import was probably wrong. I was trying to do it the native CSS way (MDN), but SCSS might have been overwriting that. #import by SCSS is also deprecated by now and not recommended. When I rechecked the SCSS Website, I went to their guide on how to use SCSS, and they mentioned how I could use #use to import another stylesheet. What I learned was that I need to use Partials. I had to lead filenames with an underscore to create a namespace for that, and import it using the #use rule.
From their example:
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss
#use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
* I don't know if the installation of sass actually helped or not. Since the package is dealing with JavaScript, which I have not done so in my file. But since the package is also mentioned in the sass-loader, I will keep it.
What is important to remember when using #use is how you handle the file in the new file.
// src/_list.scss
#mixin list{
ul {
display: flex;
flex-direction: row;
li {
text-align: center;
padding: 5px;
}
}
}
By only calling the URL, you have to specify the namespace and then what you want to use from that namespace.
// styles.scss
#use "src/list";
header {
#include list.list;
}
You can call a new namespace and give it a custom name.
// styles.scss
#use "src/list" as myList;
header {
#include myList.list;
}
Or you can call it and name it with an asterisk, making it available, without having to write the namespace when calling it.
// styles.scss
#use "src/list" as *;
header {
#include list;
}
For further reading, please check out their documentation on #use.

Check whether you have installed all these packages:
sass (https://www.npmjs.com/package/sass)
sass-loader (https://www.npmjs.com/package/sass-loader)
css-loader (https://www.npmjs.com/package/css-loader)
style-loader(https://www.npmjs.com/package/style-loader)
node-sass (https://www.npmjs.com/package/node-sass)
you might be missing node-sass

Is it possible to work with vue-loader under brunch?

I'm trying to use vue.js and vue-loader in my Phoenix Framework app with default brunch asset manager. Of course - I can switch to webpack, but I'd like to solve this issue under brunch.
I have following app.js
import App from './App.vue'
new Vue({
el: 'body',
components: { App }
})
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<p>hot reloading</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
and brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
},
vue: {
extractCSS: true,
out: 'priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true,
whitelist: ["phoenix", "phoenix_html", "vue"],
globals: {
Vue: "vue/dist/vue.common.js",
Vuex: "vuex/dist/vuex.min.js",
Axios: "axios/dist/axios.min.js",
VueAxios: "vue-axios/dist/vue-axios.min.js"
},
}
};
and package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"axios": "^0.16.2",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"postcss-brunch": "^2.0.5",
"vue": "^2.3.4",
"vue-axios": "^2.0.2",
"vueify": "^9.4.1",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-brunch": "~6.0.0",
"brunch": "2.7.4",
"clean-css-brunch": "~2.0.0",
"css-brunch": "~2.0.0",
"javascript-brunch": "~2.0.0",
"uglify-js-brunch": "~2.0.1",
"vue-loader": "^13.0.0"
}
}
but after running phoenix server I see error message in browser's console
app.js:62 Uncaught Error: Cannot find module 'web/static/js/App.vue' from 'web/static/js/app.js'
at require (app.js:62)
at expanded (app.js:34)
at app.js:36
at initModule (app.js:43)
at require (app.js:60)
at app.js:11539
Whats wrong and how to solve this issue? Of course - nothing applied in my browser :(

I have a similar set up, using Phoenix 1.3.
app.js:
import "phoenix_html"
import Vue from 'vue'
import App from "../vue/components/MyApp.vue"
Vue.component('my-app', MyApp);
import Test from "../vue/components/Test.vue"
Vue.component('test', Test);
import axios from 'axios';
var vm = new Vue({
el: '#app',
render: h => h(MyApp)
})
brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["priv/static/css/app.scss"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/assets/static". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor", "vue"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
"fonts": ["node_modules/font-awesome/fonts"] // copy node_modules/font-awesome/fonts/* to priv/static/fonts/
},
sass: {
options: {
includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // tell sass-brunch where to look for files to #import
precision: 8 // minimum precision required by bootstrap
}
},
vue: {
extractCSS: true,
out: '../priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
globals: { // Bootstrap JavaScript requires both '$', 'jQuery', and Tether in global scope
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether',
bootstrap: 'bootstrap' // require Bootstrap JavaScript globally too
}
}
};
package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"axios": "^0.16.2",
"bootstrap": "^4.0.0-alpha.6",
"eslint-plugin-vue": "^2.1.0",
"font-awesome": "^4.7.0",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"vue": "^2.3.4",
"vue-brunch": "^2.0.1"
},
"devDependencies": {
"babel-brunch": "6.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"brunch": "2.10.7",
"clean-css-brunch": "2.10.0",
"copycat-brunch": "^1.1.0",
"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.2.0",
"eslint-plugin-import": "^2.7.0",
"holderjs": "^2.9.4",
"node-sass": "^4.5.3",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "2.1.1"
}
}
I created a directory at assets/vue/components, which is where I put MyApp.vue and Test.vue
If things go right, your JS files should be compiled and be in priv/static/js/app.js
The problem with this setup is you will pull in these components in every page, if you are using a MPA. Brunch's entryPoint (instead of joinTo) looks like it could help with this, but still have problems getting that set up right.

Browserify Shim Buffer core module

I'm trying to browserify my library where there are Buffer core module being use in different places.
I want to shim this core Buffer with another library that we are using.
I have tried to look into https://github.com/thlorenz/browserify-shim where I can specify my module that I want to shim but it doesn't seem to work.
I've created file called shim.js
var Buffer = require('myModule').Buffer;
module.exports = {
Buffer: { exports: Buffer }
};
in Package.json
{
...
"dependencies": {
"MD5": "^1.2.1",
"browser-request": "^0.3.1",
"browserify-shim": "^3.6.0",
...
},
"devDependencies": {
...
},
"browserify-shim": "./shims.js"
}
And in Gruntfile.js (I'm using grunt-browserify)
browserify: {
src: "./index.js",
options: {
transform: ['browserify-shim'],
browserifyOptions: {
builtins: false
},
bundleOptions: {
standalone: "mylibrary"
}
}
}
},
Right now when I grunt build the file I'm still seeing this being require in:
[function(_dereq_,module,exports){
(function (Buffer){
And in my browser is complaining about
Uncaught Error: Module name "buffer" has not been loaded yet for context: _. Use require([])

Grunt and Bourbon - Cannot Find Module 'Bourbon'

I'm trying to use GruntJS to make some improvements to my workflow - I've been using Compass for a while but I'm wanting to try out Bourbon and so I've been trying to get this working but failing.
I'm getting the following error when I run 'grunt':
ERROR: Cannot find module 'bourbon'
I've installed this through Node using 'npm install' with the following 'package.json' file:
{
"name" : "project",
"description": "description",
"version" : "0.0.1",
"dependencies" : {
"node-sass": "~0.8.4",
"node-bourbon": "~1.0.0",
"grunt": "~0.4.4",
"grunt-contrib-watch": "~0.6.1",
"grunt-sass": "~0.12.0",
"grunt-contrib-uglify": "~0.4.0",
"matchdep": "~0.3.0"
}
}
My grunt file looks like this:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify: {
my_target: {
files: {
'assets/js/main.js': ['_/js/scripts.js']
} // files
} // my_target
}, // uglify
sass: {
dist: {
options: {
includePaths: require('bourbon').includePaths,
outputStyle: 'compressed'
},
files: {
'assets/css/main.css': '_/stylesheets/**/*.scss'
}
}
},
watch: {
options: { livereload: true },
grunt: { files: ['gruntfile.js'] },
scripts: {
files: ['_/js/scripts.js'],
tasks: ['uglify']
}, //script
sass: {
files: ['_/stylesheets/**/*.scss'],
tasks: ['sass']
}, //sass
php: {
files: ['**/*.php']
}
} //watch
}) //initConfig
grunt.registerTask('default', 'watch');
} //exports
I've also imported the file in the top of my SCSS stylesheets using:
#import 'bourbon';
Not sure what I'm doing wrong here, any help would be greatly appreciated!
Please let me know if you need any more info.

You are requiring the wrong package name. It should be:
includePaths: require('node-bourbon').includePaths
but you have:
includePaths: require('bourbon').includePaths

Install Bourbon manually:
Install the gem:
$ gem install bourbon
Install Bourbon into your project's stylesheets directory by generating the bourbon folder:
$ bourbon install