CODEWITHSUNDEEP
vue.jsvuejs2
Dorin Grigore
Dorin Grigore

Reputation: 25

How to uglify a js file upon building the vue project

I have a VUE2 project and in the public folder I created an iframe.html file that will be loaded in an iframe.

That iframe will also load a javascript.js file that I want encoded/uglified upon "npm run build" but I also want to be able to access it during dev.

How could I proceed?

  1. Should this js file be placed inside the /src/assets/ folder and referenced from the iframe.html file? If yes, any advice?
  2. Or should it stay in the public folder and upod the dist folder being built, encode it with something.

Any solution is welcome, thanks in advance!

Edit: Here are further details of how I use the iframe.

First, I'm referencing the .vue file in the router like so:

{
    path: "/pages/:id/edit",
    name: "edit",
    component: () => import("../views/Edit.vue"),
  },

Next, in the Edit.vue file, I add the iframe like so (note how it's referencing iframe.html that is in the public directory):

<iframe
      id="iframe"
      ref="iframe"
      src="iframe.html"
    />

Next, in the iframe.html it's just normal html code, with this part including the javascript.js file (that actually is in the public folder as well for now)

<script src="javascript.js"></script>

Upvotes: 1

Views: 1608

Answers (1)

goldmund
goldmund

Reputation: 31

You can explicitly include the .js file in your Webpack config by adding a rule for UglifyJsPlugin:

npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        include: /\/regex-for-file/,
        minimize: true
      })
    ]
  }
  ...
};

In Vue.config.js, this might look like:

configureWebpack: {           
  plugins : [
    new webpack.optimize.UglifyJsPlugin({ 
      uglifyOptions: { 
        include: /\/regex-for-file/,
        minimize: true
      }
    )}
  ]
}

Another option is to use uglify-es; this would allow you to get even more explicit by specifying from where to copy the file during build (assuming you might want the file located outside of src/):

npm i -D uglify-es // CopyWebpackPlugin ships w/ Vue's Webpack conf by default
const UglifyJS = require('uglify-es');
const { resolve } = require('path');

const resolveAbs = (dir) => resolve(__dirname, dir);


new CopyWebpackPlugin([
  {
    from: resolveAbs('../external'),
    to: config.build.assetsSubDirectory
  },
  {
    from: resolveAbs('../src/custom-build-path'),
    to: config.build.assetsServerDirectory,
    transform: (content, path) => UglifyJS.minify(content.toString()).code;
  }
]),

To be able to access it during dev, you can include the path of the js file (relative to your Vue src directory) using the resolve.alias option in the config (so you don't need to deal with possibly ridiculous relative paths in your project). Finally, you can look into webpack's HTML plugin docs for info on importing an external index.html file if needed

I would recommend not putting it in static; by default it will not be minified and built if placed in that directory.

Update/edit: Sorry, I saw a 'uglify' and just assumed you wanted uglify js. As long as the script is in your Vue project directory (or otherwise specified in the Webpack config) the file should be minified during build. Vue has pretty smart defaults for Webpack; assuming the iframe is being referenced somewhere in the app i.e. the dependency graph it will be built.

Upvotes: 2

Related Questions