How to remove eval and Function constructor from webpack build to avoid CSP issues - google-chrome-extension

Question

Problem is with Webpack which uses eval in compiled code. Due to this, Chrome extension and Firefox addons does not work as it requires 'unsafe-eval' directive in CSP property which is not allowed. I am using Vue.js for frontend and webpack and vue-loader for build process
Package.json file
{
"webpack": "^3.10.0",
"babel-core": "^6.18.2",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.24.1",
"file-loader": "^0.9.0",
"style-loader": "^0.18.2",
"vue-loader": "^10.0.2"
}
This is what contained within build.js file from webpack. Both Function constructor and eval usages.
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1,eval)("this");
} catch(e) {
// This works if the window reference is available
if(typeof window === "object")
g = window;
}
// Another method of build
function setImmediate(callback) {
// Callback can either be a function or a string
if (typeof callback !== "function") {
callback = new Function("" + callback);
}
This is the result of the web-ext lint which checks for issues in addon
Code Message File Line Column
DANGEROUS_EVAL The Function build.js 433 11
constructor is
eval.
DANGEROUS_EVAL eval can be build.js 433 43
harmful.
DANGEROUS_EVAL The Function build.js 8814 20
constructor is
eval.
Is there any way I can just build without Webpack using build because from side of Vue there is a support to use runtime code of Vue but Webpack has no flat to build as per CSP policy. Please help as I don't need especially this line in build

Answer 1

The reason is that, Webpack checks for global variables and it needed, node:false in Webpack config file which actually removes the above mentioned code. The reason, the above code is not an issue on web application because it won't run the code but in case of Chrome Extension or Firefox plugin, the code is scanned irrespective of execution and this was creating problem.
This is present in webpack source code here. More info about globals is present here.
Tried it with webpack: ^3.11.0 version, worked like charm.

Answer 2

This happens because of Vue.js, not Webpack.
According to the vue docs:
Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of new Function() for evaluating expressions. The full build depends on this feature to compile templates, so is unusable in these environments.
On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments.
Unfortunately, Vue doesn't have something like ng-csp in Angular. So the only way to run your extension – to use runtime build.
There are good answers how to such build:
Vue.js in Chrome extension
Vuejs browser extension without using 'unsafe-eval' in CSP