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

Question

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.

Solution

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