How to speed up webpack development - npm

The Question:
Is there any way to also set up webpack to work in a fast developement mode?
If only it could be like editing files without a bundler. Make a change - view in browser immediately.
A bit of context:
As far as I know, the goal of using webpack is to pack what you need into as few files as possible and be able to cleanly require() across .js files, but it has the large downside of taking anywhere form a few seconds to mutliple minutes in order to build it, completely destroying a developers headspace when trying to view quick changes.
Specific details of a slow webpack set up:
I have been using a weback.config made by a colleague which combines and uglifys files and packages with the goal of having modulare js and a fast production website:
Webpack.config:
var path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: "none",
entry: {
"physiomeportal": "./src/index.js",
"physiomeportal.min": "./src/index.js",
},
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name].js",
library: 'physiomeportal',
libraryTarget: 'umd',
globalObject: 'this'
},
module: {
rules: [
{ test: /\.(html)$/, use: [{ loader: 'html-loader' }]},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(jpe?g|gif)$/i,
loader:"file-loader",
query:{
name:'[name].[ext]',
outputPath:'images/' }
},
{ test: /\.(vs|fs)$/i,
loaders: [
'raw-loader'
]
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
new UglifyJsPlugin({
include: /\.min\.js$/,
uglifyOptions: {
compress: true
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
})
]
};
I been using npm run build every time I wish to see changes to a file that uses require()

Webpack-dev-server
Start with using webpack-dev-server.
It has an option for 'hot reloading', where only changed elements of your app will be rebuilt. It aims to adjust in browser without refreshing but depending on your app, that functionality doesn't always work.
Install it using
npm install webpack-dev-server --save-dev
Add it to your webpack.config
"scripts": {
...,
"start:hotdev": "webpack-dev-server --hot",
...
}
Run it
npm run start:hotdev

Related

Serverless Webpack generates empty files in ZIP package

I'm facing with a rather annoying and frustrating anomaly with Serverless + Webpack generating empty files in the .serverless/<package>.zip.
Config
serverless.yml
...
webpack:
webpackConfig: ./webpack.config.js
includeModules: true
...
webpack.config.js
const slsw = require("serverless-webpack")
const nodeExternals = require("webpack-node-externals")
// const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
entry: slsw.lib.entries,
target: 'node',
// Generate sourcemaps for proper error messages
devtool: 'source-map',
// Since 'aws-sdk' is not compatible with webpack,
// we exclude all node dependencies
externals: [nodeExternals()],
mode: slsw.lib.webpack.isLocal ? "development" : "production",
optimization: {
// We do not want to minimize our code.
minimize: false
},
performance: {
// Turn off size warnings for entry points
hints: false
},
// node: false,
// devtool: 'inline-cheap-module-source-map',
// Run babel on all .js files and skip those in node_modules
module: {
rules: [
{
test: /\.js$/,
include: __dirname,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
targets: { node: '12' },
useBuiltIns: 'usage',
corejs: 3,
},
],
],
},
},
],
},
],
},
plugins: [
// TODO
// new CopyPlugin([
// 'path/to/specific/file',
// 'recursive/directory/**',
// ]),
],
};
Additional Data
Serverless-Webpack Version: "serverless-webpack": "^5.3.5",
Webpack version: "webpack": "4.44.2",
Serverless Framework Version: 1.83.2
Operating System: MacOS
I have tried other version combinations too: Serverless 2.20, webpack 5.17.0, copy-webpack-plugin 7.0.0
Why empty files in ZIP?? 🤯
Update:
I have just tried to run sls package in one of the example projects with same result, empty files in ZIP.
Thanks.
I downgraded nodejs from 15.7.0 to 15.4.0 and it's working fine now.
Solution: downgrade Node JS from version 15 to 13. (Did not try 14.)
Use nvm to manage different versions of the node.
The issue was happening for me with node version v15.8.0. Resolved by downgrading system version to v14.15.5 using nvm.
Reference - https://forum.serverless.com/t/empty-files-in-uploaded-zip/13777

Is Ionic+Vue as frontend combinable with Umbraco as backend? (Webpack frustrations)

My first question here on Stackoverflow :) I'm trying to make an app with Ionic&Vue, and as a CMS I'm using Umbraco. I want to connect the two, which I'm now trying by configuring Webpack, so that Webpack will take my main.ts file that Ionic&Vue created and do stuff with it and put it in the main Umbraco folder as a source file where I can reference Umbraco content.
I'm not having a lot of luck with it unfortunately. I've tried configuring a webpack.config.js file and installing a bunch of libraries like 'vue-loader', 'ts-loader', 'vue-template-compiler', 'vue-style-loader' et cetera. Some stuff is getting compiled, it's just that I keep getting an error that there's a mismatch in versions (vue is #3.0.2 and vue-template-compiler is #2.6.12). Ionic won't work with Vue under version 3 though so I feel like I'm stuck.
So my question: am I missing something? Is it really not possible or is there another way to compile a file from .ts to .js to a folder of my wish?
Edit (webpack config file):
var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = (env, argv) => {
let transpileOnly = argv.transpileOnly === 'true';
return {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundledwebpack.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
}
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
compiler: '#vue/compiler-sfc'
}
}
]
},
plugins: [
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
].concat(transpileOnly ? [
new ForkTsCheckerWebpackPlugin({
reportFiles: ['src/**/*.{ts,tsx,vue}', '!src/**/*.js.vue'],
tslint: true,
vue: true
})
] : [])
,
mode: 'development'
}
}
This sounds more like a vue issue than a Umbraco one. You should be able to do it. After a quick google there is a working project here:
https://github.com/ionic-team/ionic-vue-conference-app
Have you tried explicitly installing packages with version numbers that work, e.g.
npm install #ionic/vue#0.0.4

Production and Staging build are different

My app has 3 enviornments, which changes the API base url:
• Production
• Staging
• Local
When building my app for production I use the $ vue-cli-service build which builds everything the way it should, perfect!
When building for staging I use $ vue-cli-service build --mode staging and this brings me some issues:
• My files have different compressing style from production;
• My files aren’t hashed containing the [name].[hash].[extension]
• My service-worker isn’t generated by registerServiceWorker at root.
How can I set my staging build to the exact same build that I use in production?
My webpack config
const path = require("path");
const webpack = require("webpack");
const WebpackAssetsManifest = require('webpack-assets-manifest');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ["vue-style-loader", "css-loader", "sass-loader"]
},
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
},
{
test: /\.(csv|xlsx|xls)$/,
loader: 'file-loader',
options: {
name: `files/[name].[ext]`
}
}
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]-[hash].js',
chunkFilename: '[id]-[chunkhash].js',
},
plugins: [
new WebpackAssetsManifest({
publicPath: process.env.VUE_APP_FRONTEND_ROOT_URL,
}),
new webpack.DefinePlugin({
"API_URL": process.env.VUE_APP_FRONTEND_ROOT_URL
})
],
};
I found the solution after 3 days of research, it's so simples it makes me crazy.
In my .env.staging file I just needed to rewrite NODE_ENV to production, that way I would have my API running as staging and my production config would run as normal.
NODE_ENV=production

Webpack Build Error: Can't resolve subcomponents within a PrimeVue UI component

I am unable to build certain PrimeVue UI components with webpack.
I have tried several components, and all the basic ones work fine, but as soon as I try and use a component that requires a sub-component, webpack fails to build. I experienced this so far with the Breadcrumb and PanelMenu components.
The error is:
ERROR in ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './PanelMenuSub' in '/my-application-directory/node_modules/primevue/components/panelmenu'
# ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&) 27:0-42 86:24-36
# ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&
# ./node_modules/primevue/components/panelmenu/PanelMenu.vue
# ./node_modules/primevue/panelmenu.js
# ./interface/html5/vue-components/Menu.js
# ./interface/html5/vue-components/App.js
# ./interface/html5/vue-main.js
My webpack config is as follows:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
entry: 'vue-main.js',
output: {
filename: 'vue-main.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// the below will apply to both plain `.js` files AND `<script>` blocks in `.vue` files
// the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
The component is used exactly as described in the documentation.
What could be causing this? The same is happening with the Breadcrumb component, except it can't find the BreadcrumbItem component. I checked the node_modules directory and the files are there.
Is this a webpack config file problem, a PrimeVue bug, or a user (me) error?
is that your full config without babel? I would try to resolve properly.
https://webpack.js.org/configuration/resolve/
resolve: {
alias: {
'#': res('src'),
'vue$': 'vue/dist/vue.esm.js'
},
modules: [res('node_modules')],
extensions: ['.js', '.vue', '.json']
},
resolveLoader: {
modules: [res('node_modules')]
}

Critical dependency: the request of a dependency is an expression, vue.js

My testing-app is compiling fine, except that I get this warning:
" Critical dependency: the request of a dependency is an expression"
(base) marco#pc01:~/webMatters/vueMatters/PeerJS-VueJS-Test$ npm run serve
> testproject#0.1.0 serve /home/marco/webMatters/vueMatters/PeerJS-VueJS-Test
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
WARNING Compiled with 1 warnings
7:22:25 PM
warning in ./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression
App running at:
- Local: http://localhost:8080
- Network: http://ggc.world/
Note that the development build is not optimized.
To create a production build, run npm run build.
I read around that it might depend of webpack, but didn't find how to put it right.
This is webpack.config.js :
{
"mode": "development",
"output": {
"path": __dirname+'/static',
"filename": "[name].[chunkhash:8].js"
},
"module": {
"rules": [
{
"test": /\.vue$/,
"exclude": /node_modules/,
"use": "vue-loader"
},
{
"test": /\.pem$/,
"use": "file-loader"
}
]
},
node: {
__dirname: false,
__filename: false
},
resolve: {
extension: ['*', '.pem'],
},
devServer: {
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
https: true,
compress: true,
public: 'ggc.world:8080'
}
}
Any ideas about how to solve it?
The following code works for me. Edit vue.config.js and add webpack config:
configureWebpack: {
module: {
exprContextCritical: false
}
}
const webpack = require('webpack');
module.exports = {
// ... your webpack configuration ...
plugins: [
new webpack.ContextReplacementPlugin(
/\/package-name\//,
(data) => {
delete data.dependencies[0].critical;
return data;
},
),
]
}
try this one
For people coming here using CRA and having trouble with PeerJS, install react-app-rewired and use the following override config and it should work.
/* config-overrides.js */
const webpack = require('./node_modules/webpack')
module.exports = function override (config, env) {
if (!config.plugins) {
config.plugins = []
}
config.plugins.push(
new webpack.ContextReplacementPlugin(
/\/peerjs\//,
(data) => {
delete data.dependencies[0].critical
return data
}
)
)
return config
}
It seems it is an error between the library bundler (parcel) and CRA bundler (webpack), and I couldn't find any official fix on the way.