I have a web app with laravel and vuejs.
I use laravel-mix and in my webpack.mix.js i have:
const { mix } = require('laravel-mix');
mix.sourceMaps();
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
now I would obfuscate code, so all my components, how can I do this with laravel-mix?
npm run dev will NOT uglify / minify your code, but npm run production WILL.
If you are looking to use uglify...
laravel mix is just a wrapper around webpack. So you can install the UglifyWepackPlugin here https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
Afterwards, you can edit your mix.webpackConfig to use the plugin, as detailed here: https://laravel.com/docs/5.5/mix#custom-webpack-configuration
Install https://github.com/javascript-obfuscator/javascript-obfuscator and https://github.com/javascript-obfuscator/webpack-obfuscator.
After that you need to include de plugin in the webpack configuration, you can do that adding the next code in webpack.mix.js file.
let mix = require('laravel-mix');
let JavaScriptObfuscator = require('webpack-obfuscator');
mix.webpackConfig({
plugins: [
new JavaScriptObfuscator ({
rotateUnicodeArray: true
}, ['excluded_bundle_name.js'])
],
});
mix.js('resources/assets/js/app.js', 'public/js');
After that all your js files will be obfuscater.
Related
I try without success to apply a prerendering (or a SSG) to my Vue3 application to make it more SEO friendly.
I found the vue-cli-plugin-prerender-spa, and when I try it with the command line: vue add prerender-spa I have the error:
ERROR TypeError: Cannot read properties of undefined (reading 'endsWith')
After that I tried prerender-spa-plugin but I have an error when I make a npm run build:
[prerender-spa-plugin] Unable to prerender all routes!
ERROR Error: Build failed with errors.
Error: Build failed with errors.
at /Users/myusername/Workspace/myproject/node_modules/#vue/cli-service/lib/commands/build/index.js:207:23
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3
What do you think about this? Do you have any idea?
Nuxt3 is a really powerful meta-framework with a lot of features and huge ecosystem. Meanwhile, it's in RC2 right now so not 100% stable (may still work perfectly fine).
If your project is aiming for something simpler, I'd recommend using Vitesse. It may be a bit more stable and it's probably powerful enough (check what's coming with it to help you decide).
Some solutions like Prerender also exist but it's paid and not as good as some real SSG (/SSR). Also, it's more of a freemium.
I struggled with the same error output until I found the prerender-spa-plugin-next. Then I notice the latest version of prerender-spa-plugin was published 4 years ago and prerender-spa-plugin-next is continually updating. It seems like that prerender-spa-plugin-next is a new version of prerender-spa-plugin with the same functions. So I use prerender-spa-plugin-next instead of prerender-spa-plugin then everything works fine!
Here is my step:
install the package
npm i -D prerender-spa-plugin-next
modify vue.config.js like
const plugins = [];
if (process.env.NODE_ENV === 'production') {
const { join } = require('path');
const PrerenderPlugin = require('prerender-spa-plugin-next');
plugins.unshift(
new PrerenderPlugin({
staticDir: join(__dirname, 'dist'),
routes: ['/'], //the page route you want to prerender
})
);
}
module.exports = {
transpileDependencies: true,
configureWebpack(config) {
config.plugins = [...config.plugins, ...plugins];
},
};
build
npm run build
Then check the index.html under the dist folder you can see the page is prerendered.
Further usage refers to the homepage of prerender-spa-plugin-next
Found and fix about the scss files to import.
In nuxt.config.ts use :
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "#/assets/scss/_variables.scss";
#import "#/assets/scss/my-style.scss";
`
}
},
},
}
Now my 2 mains issue are : how to install vuetify properly, currently syles and components seems working but the JS not, for example, accordions don't expands on click.
And second topic is to have a i18n module, it seems that vue-i18N no longer works.
Thanks.
I have small vue2 cli project that is really difficult to configure. I don't know why all the examples that I found gives build error
I have now vue.config.js file
module.exports = {
//publicPath: '/xxx',
configureWebpack: {
devtool: 'source-map'
}
}
what i need to do to make console off in release build?
I created new fresh project with latest VueJS-cli tool. Looks like VueJS CLI is using Webpack 4.43.0.
How to remove that Webpack section, that is visible under browser console/debugging tab?
All code with comments are visible and nothing is striped and uglified.
yarn build shows that it is building for production. Also I tried export NODE_ENV=production
Thanks in advance
I solved.
In : vue.config.js
module.exports = {
configureWebpack: {
devtool: false
}
}
I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.
How can I generate CSS files in watch mode?
You can achieve this by adding this line of code in your vue.config.js
//vue.config.js
module.exports = {
//adding extract css true solves this issue
css: {
extract: true
}
}
https://cli.vuejs.org/config/#css-extract
There is a good chance that you have to use an extract plugin for webpack.
I know that in my vue.config.js file I'm using :
chainWebpack: config => {
if (config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css');
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: 'build.css',
chunkFilename: 'build.css'
}
]);
}
}
Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.
I am working on a Vue.js project and all files are generated by webpack on dev and production mode.
but here is my problem :
I can see my vue components in devtools when I inspect on a element.
How could I disable that ?
By the way source map is disabled and I have no .map files in dist folder.
thank you :)
Just checkout the Vue cli docs:
productionSourceMap Type: boolean
Default: true
Setting this to false can speed up production builds if you don't need
source maps for production.
So in your webpack config you write:
module.exports = {
productionSourceMap: false
};
If your vue.config.js which is responsible for your webpack configuration doesn't exist, you may create it.
If webpack has been configured from scratch, it can be removed by deleting or commenting in any case in the webpack production file
the devtool option
tools/webpack.prod.js
module.exports = merge(common, {
// devtool: "source-map",
mode: "production",
...
});