Develop Reference

Vue JS note transpiling node module

I have a Vue app created with vue create app and have the following settings in the babel.config file:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
My Vue config file also looks like this:
module.exports = {
configureWebpack: {
optimization: {
splitChunks: false
}
},
css: {
extract: false,
}
}
At the moment when I run vue-cli-service build it compiles all my modules and styles into 1 bundled JS file.
There is an issue however with one of my NPM modules: socket.io-client
It appears that the way that Vue is compiling my app, it is not transpiling something within this package which is causing syntax errors in Internet Explorer 11.
I am fairly sure the problematic code in socket.io-client lies with one of it's dependencies called debug.
What I would like to do is have this package (socket.io-client) also transpiled so that I don't get the error in IE11.
I would have thought that Vue CLI would do this out of the box when you run the build but perhaps something has been setup wrong in my babel or Vue configuration? How could I resolve this issue?
Thanks!

You can use transpileDependencies option in your vue.config.js.
By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.
Example:
module.exports = {
...
transpileDependencies: [
'socket.io-client'
]
}

Found the issue here:
https://github.com/socketio/socket.io-client/issues/1328
Reverting the problematic package to previous version fixed it

Combine, Minify, and convert to ES5 with WebPack and Babel

I have a project that works perfect and was written in TS, I had to convert it to plain JS and it works for the most part. The issue where I am struggling is removing the default WebPack loader after the files have been combined and minified, WebPack includes a loader to the final output even thought I do not need a loader since all the files are combined into one large file.
+ filea.js
+ fileb.js
+ filec.js
+ filed.js
-> output bundle.js
I have read a few articles/posts that recommend manually creating a config file providing the name of each of the files that will combined and minified, this may work OK but the problem is that the project I am working on is broken into small chunks (modules) so that tools such WebPack can be smart enough and know when a file should be added as a dependency in the final output.
I know we can combine and minify multiple individual JS files but when it comes to exporting a single file it seems like the task is trivial With TS but in the vanilla JS world there is little or no information about the subject.

I don't understand something, do you want to have one big file or small individual modules (chunks)?
An example of small modules:
module.exports = {  
entry: {    
app: './src/app.js',
admin: './src/admin.js',
contact: './src/contact.js'  
}
};
Another method is one main module and it contains all smaller modules.
module.exports = {  
entry: {    
app: './src/app.js'  
}
};
You can also use something like lazy loading. Then the modules (chunks) will be dynamically loaded only when needed. lazy-loading
Here is an example of using several entries webpack-boilerplate.

Sounds like you have a project with several JS files and you want to use webpack to bundle all of them and minify the result.
Webpack was built for this.
You'll need to add a build step in your package.json like this:
"scripts": {
"build": "webpack --config prod.config.js"
}
Then you'll need to create a webpack.config.js with a module.exports block that has an entry point and rules to include in your project. The following should be a minimal setup that can get your started:
const path = require('path');
module.exports = {
entry: "./your/path/to/src",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {},
plugins: [
new MinifyPlugin(minifyOpts, pluginOpts)
]
}
You can add modules that perform additional code transpilation for files that matcha a certain regex. You can also use a plugin to perform minification such as babel-minify-webpack-plugin as documented here https://webpack.js.org/plugins/babel-minify-webpack-plugin/. (Note you will need to add this dependency.)
The full webpack configuration can be found here: https://webpack.js.org/configuration/

Why webpack is including node_modules of dependency?

I have two modules inside the same directory, managed both by lerna js. One of them is a library that others module includes. Both of them packed by webpack following webpack library authoring.
But, when I launch webpack in the app dir, the process includes all library/node_modules dependencies inside the app, for example vue.js. In library vue is "devDependency" while in the app is "dependencies". This implies two Vue context in navigator. Somebody known why?
Thanks.

You need to add an alias:
module.exports = {
...
....
},
resolve: {
modules: ["node_modules",
alias: {
'vue$': 'vue/dist/vue',
'jquery': 'jquery/dist/jquery.min.js'
}
},
...

Thanks to #evocateur
"Node resolves symlinks when requiring, which means libraries (like React and Vue) that are singletons will break. You need to add resolve.alias webpack config so it always chooses the "root" node_modules packages."
Putting in webpack following works perfectly in resolve.alias:
vue: path.resolve(__dirname, './node_modules/vue/')

Using Webpack and stylus to create static css

new to Webpack. I was thinking about migrating JS part of my application to it. However, I don't like the way it handles CSS. Would like to keep it easy and link them on my own. Unfurtunately documentation wasn't very helpful, same with the search results.
So, what do I need exactly?
Stylus compilation from lots of .styl files to static .css.
There will be three static stylesheet files (entry points?), but completely different from entry points of JS part of an application.
Also some "watch" feature, which would compile css when one of source .styl files has been changed.
Is there somebody who could point me in right direction, maybe write a config? Is this even possible with Webpack or should I stay with Grunt?
Thanks for any useful answer.

To learn more about the details of Webpack you can refer to this online book SurviveJS - Webpack, which will walk you through most of concepts related to Webpack.
To accomplish what you need you can start by creating webpack.config.js in the root of your project and it can be like this:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './entry.js', // you application entry point
output: {
filename: 'bundle.js', // resulting bundle file
path: './public' // the output folder path
},
module: {
loaders: [
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files
}
]
},
plugins: [
new ExtractTextPlugin('style.css') // output css bundle
]
};
Then require your stylus files in you entry.js file require('./style.styl');
Don't forget to install required loaders and plugins
npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin

webpack 1: resolve.alias not aliasing one npm module to another

I have a webpack config used to create a server bundle for an isomorphic React app. Inside of that config, I’m trying to use resolve.alias to alias one module (parse) as another (parse/node). This handy chart about resolve.alias in webpack's documentation makes it seem like this should be possible. This is what my alias object looks like:
alias: {
parse: 'parse/node',
pubnub: 'static/deps/pubnub/pubnub-3.13.0.min.js'
}
I’m already using alias for the module pubnub, and that alias works at intended. Unfortunately, whatever I do to the parse key doesn’t seem to change the resulting require in my webpack-built bundle.js:
/***/ function(module, exports) {
module.exports = require("parse");
/***/ },
I’m trying to resolve to /node_modules/parse/node.js. Using absolute/relative paths doesn’t seem to work, nor added a .js extension to the end. At this point, I can’t figure out if this is a webpack bug or something I’m overlooking. Any help would be greatly appreciated! Here’s a link to a gist with my full webpack config: https://gist.github.com/daleee/a0025f55885207c1a00a
node#5.7.0
npm#3.7.5
webpack#1.12.14

The issue was with the following line in the webpack configuration:
...,
externals: [nodeExternals({
whitelist: ['webpack/hot/poll?1000']
})],
...,
webpack-node-externals is a webpack plugin that is used to automatically blacklist modules found in node_modules. There is usually no need to bundle npm modules in with your final bundle when building for the backend, as the npm modules are installed on the system. This blacklist also prevented webpack from doing any aliasing to any npm modules. Changing the whitelist array like so solved my issue:
...,
externals: [nodeExternals({
whitelist: ['webpack/hot/poll?1000', 'parse']
})],
...,
The moral of this story: don't copy code from boilerplates without fully understanding what it does. I could have saved a few days of headache if I had simply just read the README.md for the webpack plugins I was using.