So consider the following script command to run via npm run: webpack -p --optimize-minimize
Is there any way to say: Keep comments?
webpack version 2 is used.
In most applications you would not want to keep comments, but in this particular case I want to keep them, while still minifying the "script" Is this possible?
Webpack's webpack.optimize.UglifyJsPlugin has a couple of options which might fit your needs.
comments options accepts a regex or function to tell UglifyJs which comment to preserve.
extractComments let you even extract the comments to separate txt files.
Set it up like this:
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: true, // or function/regex
// Further UglifyJs config
})
],
Related
I'm using https://github.com/tssajo/Minify (which relies on uglify for javascript) to minify js, css, html via Sublime Text 2.
I want to use uglify to obfuscate function/variable names wherever possible and running the following via the command line I get the desired effect...
uglifyjs --compress --mangle toplevel testJs.js
But I can't get the same effect via Minify's "Minify.sublime-settings" file. By default it contains entries like...
"keep_comments": false,
"source_map": false,
See https://packagecontrol.io/packages/Minify for more info, but I'm struggling to find the right format to map certain uglify parameters (as detailed here: https://github.com/mishoo/UglifyJS2#readme) to Minify's sublime settings.
I've tried adding things like
"mangle": true,
"toplevel": true,
But so far I can't get the same behaviour I'm able to from the command line. Any ideas what I'm doing wrong would be hugely appreciated.
After chatting with the creator of Minify the line required in Minify.sublime-settings was simply...
"uglifyjs_options": "toplevel"
I have following json file:
{
"UseSqlite": false,
"UsersAvatarsFolder": "uploads",
"UserDefaultPhoto": "no_image.jpg"
}
Now I want to tell git to ignore the "UseSqlite": false, line So I followed this solution to ignore this specific line using .gitattributesfile:
*.json filter=ignoreSqlite
Then defined this filter in the gitconfig:
git config --global filter.ignoreSqlite.clean 'sed "s/"UseSqlite": .*/"UseSqlite": true/"'
git config --global filter.ignoreSqlite.smudge cat
But it seems that, it doesn't work:
'sed: -c: line 0: unexpected EOF while looking for matching `''
'sed: -c: line 1: syntax error: unexpected end of file
error: external filter 'sed failed 1
error: external filter 'sed failed
On branch master
I am not sure about sed syntax. Could you please take a look at it and let me know what's the correct syntax for it?
Update:
I finally fixed the syntax:
git config --global filter.ignoreSqlite.smudge "sed 's/"UseSqlite": .*/"UseSqlite": true,/'"
git config --global filter.ignoreSqlite.clean "sed 's/"UseSqlite": .*/"UseSqlite": false,/'"
But it also doesn't work, I want when I push the modification, the "UseSqlite" be true and when I pull the "UseSqlite" be false. But these filters don't work like that, Any idea?
I'm gonna guess what you've got is a config file where you want to make sure local modifications in the checkout don't get accidentally checked in. In this case, I'm going to bet you're using SQLite for testing. There are easier ways to do that which also make the system more flexible.
Simplest thing to do is have two config files: one for production and one for testing. The system defaults to the production one, but your test harness chooses the testing one.
But that introduces duplication, so what you really want is to merge together several config files. You have a config file full of defaults that generally isn't touched, then you have a local config file. The system merges the two together. For example...
config/default.json
{
"UseSqlite": false,
"UsersAvatarsFolder": "uploads",
"UserDefaultPhoto": "no_image.jpg"
}
config/local.json
{
"UseSqlite": true
}
The system loads both and the resulting config is:
{
"UseSqlite": true,
"UsersAvatarsFolder": "uploads",
"UserDefaultPhoto": "no_image.jpg"
}
Then config/local.json can be ignored by git.
This is both useful for testing and for your users. Now when they update they won't lose their changes to the configuration. config/default.json gets updated and they'll get any new or changed defaults, while keeping their own customizations in config/local.json.
I have just started using Webpack via a recommendation and am looking for some guidance on how it should be implemented for build and deploy purposes.
I currently have it up and running nicely using webpack-dev-server and some Gulp tasks.
Traditionally I would use Gulp or Grunt to concat files among other things and then use the task runner to copy all my files and assets to a dist or build directory from where I would deploy everything.
At the minute, Webpack does it's thing and builds the bundle file, images etc and then copies them to the build dir, using the [hash].js naming convention.
So my question is, what is the standard practice for then copying over my index.html file and then correctly linking it to the js file to be used in production.
Unless I am completely misunderstanding how Webpack should be used, should there not be some way for me to do this, with the ultimate outcome being me having the ability to navigate to the build dir and see my app up and running as it should be?
I am currently using a plugin to move my index.html. Make sure your webpack.output.publicPath points to your site so it can link images and other resources.
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack_config = {
//Other configs here
output: {
publicPath: 'http://localhost/'
},
//Other configs here
plugins:[
new CopyWebpackPlugin([
{from: './index.html', to: './index.html'},
], {
ignore: [
'*.txt',
{glob: '**/*', dot: true}
]
})
],
//Other configs here
}
I've got a project where src/main/webapp/com/mycompany/frontend/page/index.js depends on target/webjars/log4javascript/1.4.10/log4javascript.js.
I've added package.json alongside index.js with the following contents:
{
"browser":
{
"log4javascript": "../../../../../../../target/webjars/log4javascript/1.4.10/log4javascript.js"
}
}
I've got many other dependencies in the target directory. Is there a way for me to avoid repeating ../../../../../../../target/ for every dependency?
One option is to put the directory that contains your local modules, or a symlink to it, in node_modules, such as node_modules/app and then reference your requires as app/..., e.g. I believe this would work
{
"browser":
{
"log4javascript": "app/target/webjars/log4javascript/1.4.10/log4javascript.js"
}
}
Or you could structure it however you want, e.g. node_modules/log4javascript (which, if you have symlinks, could point to /whatever/target/webjars/log4javascript).
This makes it so that require() will find it in the same fashion as npm modules, without publishing it to npm. The main drawback to this is that it breaks the ability to programatically configure transforms, e.g. with browserify('app/entry').transform(whatever), app/entry and other files in the dependency graph that are under node_modules will not have the transform applied to them.
Check out the section Using Non-Relative Paths in this article.
You can use grunt-browserify's aliasMapping option to specify the root of your app:
aliasMappings: [{
cwd: 'src',
dest: 'myApp',
src: ['**/*.js']
}]
and then you can directly refer to everything from the root path, without having to ever use any dreaded ../'s:
require("myApp/target/webjars/log4javascript/1.4.10/log4javascript.js")
Of course, this doesn't resolve the problem that it's still a very long path.
The article's next paragraph makes a very good point: if you're calling things way over at the other end of your application like that, it's a good sign that things may not be correctly architected.
Can you split the functionality into smaller modules? Perhaps make log4javascript its own module?
Add to my answer, from discussion below:
If log4javascript is in your package.json file as a browser (non-NPM) module, you should just be able to require it with require('log4javascript')
On these days, a good approach to obtain a great performance in SPA application is prepare a gzipped client side bundle from a few gulp tasks.
Based on these, an awful approach to debug is consider the use of a full bundle unminified # dev environment. The question is about possible of use a gulp browserify task and gulp inject to unroll the client bundle in separated files like was developed.
I mean, maybe would be possible inject a bundle or a couple of files with a browserify boilerplate to resolve a bunch of require's and module.exports statements.
Thoughts?
The correct answer is use an option that gulp-browserify provides to run a complete src tree instead use a bundle. just set a optional flag debug: true as follows, in example:
gulp.src('./app/js/app.js'). // this path is the entry point
pipe(browserify({
insertGlobals: true,
debug: true
}));