I'm using vue-cli webpack boilerplate in this address:
vuejs-templates/webpack
I want webpack not to minify and pack js files in dev mode. how it can be achieved? the problem is that we have a huge tested asp.net webforms app, and it already includes jquery and bootstrap, in a way that can not bypassed. and i have conflicting jquery and bootstrap.js with vue. that i can not debug them in dev mode.
Webpack v4+ will minify your code by default in production mode .
Minifying strips out all comments, superfluous white space and shortens variable names. It thus reduces download time for your JavaScript files as they are (usually) a lot smaller in filesize. So, yes it does improve performance. The obfuscation shouldn't adversely affect performance.
Also, the load of minifying webpages only once won't overburden your server resources by using too much processing power. But if you aren't using HTML caching on your site, minification will be necessary for all the visitors to any of your webpages.
Are you referring to the vue-cli webpack boilerplate
: https://github.com/vuejs-templates/webpack
If so the production build (npm run build) is minified and mangled by uglify. To change its behaviour go to build/webpack.prod.conf.js
and edit the uglify production options. You can probably delete it all together based on what you require, i.e. no compression, no mangle, or set these options as below:
new webpack.optimize.UglifyJsPlugin({
compress: false,
mangle: false,
})
check out the webpack docs for more info: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
If you are having issues also with it packing vendor files this config is in the same file. Look for:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
...
})
However if you don't need it to include JQuery or Bootstrap.js in the app then can you not just avoid importing them into it? Then simply link to those 2 libaries seperately within your html.
EDIT
To address any issues you have with ESLint wanting a $
value, or any other global that you are including outside of your app, simply edit your .eslint.js
config file adding some global params or in the case of JQuery you can add the JQuery env variable:
env: {
'jquery': true
}
# or to set global vars that would be available on your apps window, i.e. window.foo
globals: {
'foo': true
},
check out eslint for further info: http://eslint.org/docs/user-guide/configuring
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With