I'm trying to use webpack only to parse my scss files to css in development environement and I was wondering if there were a way to avoid .js file generation ?
I'm new to webpack and I don't know if this is a way of using webpack that is desirable.
Related
I am a dev on a web application that consists of Java Server Pages which act as the HTML, a Java backend, and Javascript front-end files. I have been tasked with looking into adding Webpack to the project, with the goal of only using it to minify Javascript files at first (eventually we will use more of Webpack's features of course). I have tried doing research via Google into Webpack minification, but I am having trouble finding anything detailing how to use it for just minification, instead of bundling the project files.
Does anyone know how to use Webpack for strictly Javscript minification?
Webpack out of the box is anticipating on processing JS and will run minification on production builds by default.
https://webpack.js.org/configuration/mode/ (different build modes)
Assuming you are already past configuring a JS entry file to consume all your JS files:
https://webpack.js.org/configuration/entry-context/#entry
AND configured a loader on how to handle each JS file imported in your entry file appropriately.
(Feels like you want asset/resource. Pay close attention to asset modules type and generator options)
https://webpack.js.org/guides/asset-modules/
The settings for minification on a production build are what is known as the optimization.minimize configuration of your webpack.
https://webpack.js.org/configuration/optimization/#optimizationminimize
With Webpack5, further options around the minification engine has been exposed and is known as optimization.minimizer configuration options:
https://webpack.js.org/configuration/optimization/#optimizationminimizer
I'm trying to do test to use correctly SASS and I want create a file style.css and that file minify to style.min.css
sass --watch sass/style:css --style compressed
That works well but I need automate proccess doing compile & minify at the same time.
I've found this code in other stackoverflow:
sass --watch sass/style.scss:css/style.css --watch css/style.css:css/style.min.css --style compressed --scss
but now dont work how I want that works.
Also at Sass webpage the code is different now on 2020.
https://sass-lang.com/documentation/cli/dart-sass#style
I'm not use gulp tool because I think it not neccesary for Wordpress projects.
Anybody may help me?
Irrespective of what you're building your site in, if you want total control over compilation/minification/whatever then well, that's what tooling such as gulp is there for.
It looks like you were trying to compile SCSS to CSS to a file, then take that compiled CSS file and minify it. That CLI tool won't do that, but it can absolutely do the compilation/compression at the same time, directly from the source SCSS.
Using the binary you're using, this is going to compile and compress, taking ./sass/style.scss and outputting the result to ./css/style.min.css
sass sass/style.scss:css/style.min.css --style compressed
Add --watch if you want to have it react to file changes in your scss file.
Or perhaps you were trying to get a unminified and a minified version alongside. In that case, you'll simply have to run two commands. Again, gulp is there to automate this process.
Other binaries will have different flags and options, and of course there is the gulp option which I'd certainly recommend given you then don't have to remember any lengthy commands and you can share your chosen structure/tasks accross projects.
I'm using webpack to compile my sass into css and to transpile my js. The problem I'm facing is when I'm using webpack-dev-server and I make a change to my sass files, the js recompiles too, this can take some time depending on how much js I have, so I would like to know if it's possible to make webpack 4 only recompile the css and not js, or if it must compile both, how do I make it output my css first and then work on the js?
webpack.config.js
I use NativeScript Sidekick.
When I build my app, I turn on Webpack and uglifyjs, but do these options remove all my comments in my XML and JS files? Do they also minify XML and JS files?
I feel minify XML and JS files and removal of all comments in both XML and JS, improves speed and privacy.
SideKick has nothing to do with this, it's just a GUI tool for everything you could possibly do with {N} CLI.
If you are using Webpack (--bundle) for your build, then it's all about Webpack & UglifyJs (the default minimizer) configuration. I think the default configuration removes comments and the XML is embedded as a string within JS file.
I want to compile my angular 6 codes and pack them myself.
Can I use Angular 6 without Webpack?
And Does packing .html and .css into a .js WebPack's Job or Angular CLI's Job??
Webpack is a JavaScript module bundler. Angular cli uses it to pack and build the Angular app.
If you want to use Angular cli then you're stuck with Webpack for now.
Otherwise if you create your own architecture to bundle and build your app (which is harder) then you can use other Javascript module bundlers such as Rollup and Browserify
Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.