Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to tell webpack that do not minify and pack js files

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.

like image 886
ahmad molaie Avatar asked Nov 26 '16 13:11

ahmad molaie


People also ask

Does webpack automatically minify?

Webpack v4+ will minify your code by default in production mode .

Should you minify JavaScript?

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.

Do I need to minify?

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.


1 Answers

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

like image 193
GuyC Avatar answered Oct 03 '22 23:10

GuyC