Simple question about webpack is it possible to have only concat and minify js file without code of webpack like this:
/******/ (function(modules) { // webpackBootstrap
i'm using extract-plugin, uglifyjsOption actually
i have multiple entry point on my webpack config like this
entry: {
account: [
'js/lazyload.js',
'matchmedia-polyfill/matchMedia.js',
'jquery-ui/ui/core.js',
],layout:[
'js/main.js',
'js/form.js',
'js/password-complexity',
]}
For each entry point i have my key and just want to have for each key the js only concat and minify without the module bundler of webpack.
I try this but it 's the same
But i just want to concat and minify without bundler and need tio use Webpack and not gulp.
Thx for reply
Related
I am using webpack to create my production bundle for running an express application. I thought the webpack externals field would bundle up the dependencies I required to deploy without having to do a yarn install or an npm install.
My server webpack config looks like this:
const config = merge(common, {
name: 'server',
target: 'node',
externals: readdirSync(path.join(__dirname, '../../node_modules'))
.filter(x => !/\.bin|react-universal-component|require-universal-module|webpack-flush-chunks/.test(x))
.reduce((externals, mod) => {
externals[mod] = `commonjs ${mod}`;
return externals;
}, {});
I can see the following entry for express in the list of externals:
express: 'commonjs express',
But when I try and execute the file with the script that requires the express dependency I get:
Cannot find module 'express'
I thought the whole point of externals was to specify what should be bundled.
I thought the whole point of externals was to specify what should be
bundled.
Is the opposite, from the webpack documentation:
The externals configuration option provides a way of excluding
dependencies from the output bundles. Instead, the created bundle
relies on that dependency to be present in the consumer's environment.
So you don't want express in your externals, because it will actually be excluded from the bundle.
I'm developing websites with several js files and I want to bundle these js files into one js file. I started looking at Webpack, but it requires node environment to run. In fact, all my js files are none-node style, and each one of them is independent. My development environment is not node, so I'm wondering how to make all my js files into one js file.
Your js files do not need to be written as CommonJS modules ("node style") in order to bundle them with webpack.
If you want you can use loaders like the imports-loader and exports-loader to make scripts not written as CommonJS modules accessible in a webpack context.
However, it sounds like you may not even need webpack for your use case.
I would recommend using a simple gulp recipe to concatenate and minify your existing JavaScript files into a single file.
const concat = require('gulp-concat')
const gulp = require('gulp')
const rename = require('gulp-rename')
const uglify = require('gulp-uglify')
gulp.task('default', function () {
// Find all the JavaScript files in the src directory.
return gulp.src('src/*.js')
// Concatenate them all together and name the resulting sciprt app.js.
.pipe(concat('app.js'))
// Minify the script to save space.
.pipe(uglify())
// Change the file extension.
.pipe(rename({ extname: '.min.js' }))
// Output to the dist directory.
.pipe(gulp.dest('dist/'))
})
I want to have a gulpfile that first transforms my es6 code to es5 and save it to one dir, then browserify it (on every file, not just an entry file) and save it to another dir, lastly I want to minify it and put it in the browserified folder as .min.js files. Here's a diagram of what the result should look like:
src/
es6/
index.js
mod.js
es5/
index.js
mod.js
es5-browser/
index.js
index.min.js
mod.js
mod.min.js
Here's my gulpfile so far but I keep getting a can't find module error:
var gulp = require('gulp');
var traceur = require('gulp-traceur');
var browserify = require('gulp-browserify');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('es5ize', function () {
return gulp.src('src/es6/**/*.js')
.pipe(sourcemaps.init())
.pipe(traceur({sourceMaps: true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/es5'))
.pipe(browserify({
debug : true
}))
.pipe(gulp.dest('src/es5-browser'))
;
});
I know I shouldn't be using gulp-browserify but I wasn't able to get anything like this to work with vinyl either.
It works up until the browserify step
How can I get this to work?
EDIT:
I want to be able to keep this in gulp and not have to exec anything, since I will eventually want to use watchify on this too
All the other examples that are close to this first have browserify create a bundle and then manipulate that bundle but this means that it will always start browserifed which I don't want. They also seem to need to specify an entry file for browserify but I want to specify a glob and have it transform everthing that matches
you need traceur to compile as commonjs modules so browserify will understand .pipe(traceur({modules: 'commonjs' }))
I'd like to combine all the underscore templates in a directory to a single js file ( possibly precompile it ? ) for use with the backbonejs part of my sails.js app.
I think I can use the plain fs module with nodejs to read the files and combine them, I'm looking at grunt to do this as well but still not sure.
Can someone help me with this ?
You can use grunt to do this. The plugin grunt-contrib-jst is what you're looking for; it has installation and usage documents here.
A simple Gruntfile.js like this should do it. (This example assumes all your source code is under a src/ subdirectory, all templates are in *.html files under src/, and you're creating an output file in the build/ subdirectory. Adjust as needed to fit your actual situation.) Run by typing grunt on the command line.
Just include the single file build/view-templates.js in your index file to load all of your Underscore view templates.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jst');
grunt.initConfig({
// compile view templates into single file
jst: {
compile: {
files: {
"build/view-templates.js": ["src/**/*.html"]
}
}
}
});
grunt.registerTask('default', 'jst' );
};
Is there a way to keep one paths.js file to keep track of all paths for
//i know you can do this where configobject.paths = require('paths');
requirejs.config(configobject)
//and r.js build config
({
paths:require('paths'),
})
I also wanted to centralize my AMD module paths. This is an implementation in curl, but the same approach works for RequireJS:
Basically, but the config in a file:
https://github.com/SimpleAsCouldBe/appCore/blob/master/shared/appCore/setCurlPaths.js
And use the config in any page you want:
https://github.com/SimpleAsCouldBe/appCore/blob/master/exampleApp1/index.html
You can optimize this with grunt concat or something during the build. You can also tell grunt's requirejs optimizer about this shared config file:
# https://github.com/jrburke/r.js/blob/master/build/example.build.js
requirejs:
oneForAll:
options:
mainConfigFile: "shared/appCore/requireConfig.js"