I need to execute one JavaScript function before the Webpack starts its building process. The function just takes .scss files and concatenate them into one.
After that Webpack should take the result file. Is there an option to do that?
At the moment I run the function before the module.exports in webpack.config.js, but it seems that its not synchronous operation. Module.exports execute before the concat() function ends and Webpack can't find .scss file.
function concat(opts) {
(...)
}
concat({ src : styles, dest : './css/style.scss' });
module.exports = [
(...)
]
It seems a little bit odd to concat scss files before running Webpack as those kind of operations are usually handled by Webpack itself.
That being said, there's a few way of solving this.
The most obvious way would be to extract the concat parts to a separate file (e.g. prepare.js) and then run start the build process by running something along this line: node prepare.js && webpack. That'll first run prepare and if that exits without error webpack will be run. Usually that'll be added to the scripts part of your package.json, e.g.
"scripts": {
"build": "node prepare.js && webpack"
}
To achieve the same but in a more Webpack integrated way you could do the same thing where you extract the concat part to a separate file and then let Webpack execute that file, before build starts, with the help of Webpack Shell Plugin, e.g.
const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
...
plugins: [
new WebpackShellPlugin({
onBuildStart:['node prepare.js']
})
],
...
}
You can add any code at any phase of the building, using the Compiler Hooks.
The compile hook is called before (and every time) the compilation begins, so you probably want to use that:
config = {
//...
plugins: [
{
apply: (compiler) => {
compiler.hooks.compile.tap("MyPlugin_compile", () => {
console.log("This code is executed before the compilation begins.");
});
},
},
],
//...
};
Related
I am trying to use the Webpack's IngorePlugin. I am using my Webpack file only to create a CSS file. On build, it outputs a JS file. But I don't want that. Tried ignoring JS files but still outputs it.
new webpack.IgnorePlugin(/^\.\/js\/(?!admin)/),
Outputs in the ROOT folder. So I want to disable all JS files from the output in the root folder. "admin" is the file being created.
How can I do this?
To properly answer your question, it'd be helpful if you posted a link to the full WP config file and an example of the file that's being processed.
Also, you mentioned you're only using WP to create a CSS file, does that mean you're just trying to use something like SASS, Stylus, Less, etc? If so, you could probably just set up a package.json script to compile your CSS without WP.
For example, if you have a .scss file, you could install node-sass, and create a simple Node script to compile what file you pass in as an arg.
bin/
- build-css.js
src/
- styles.sass
Within build-css.js
#!/usr/bin/env node
const { basename, resolve } = require('path');
const sass = require('node-sass');
const [...files] = process.argv.slice(2);
if (files.length) {
files.forEach((relativeFilePath) => {
const fileName = basename(relativeFilePath, '.scss');
sass.render(
{
file: resolve(__dirname, relativeFilePath),
outFile: resolve(__dirname, `./public/css/${fileName}.css`),
},
(err, result) => { console.log(err); }
);
});
}
else {
console.log('No files were provided to process');
}
Within package.json
"scripts": {
"build:css": "node ./bin/build-css.js"
}
The above has the benefit of giving you the control of how your files are processed at a more granular level, and you're only locked in to any SCSS changes, instead of Webpack and SCSS.
If you're using WP for it's file watching capabilities, you could instead wire up chokidar to run the new script when you change files.
TL;DR
(vue files) + background.ts => ...[webpack]... => (bundled vue files) + background.js
can't execute background.js
expected background.js to contain only "console.log('test');"
I have a vue project with webpack and typescript.
I want my build step to produce a "background.js" file aside from the [vue JS related files].
I have a source file in typescript: "background.ts".
Through the vue.config.js I added a webpack entry "background".
It does build a file "background.js" as I expected
but it is bundled(I think) and it can't be executed by a chrome plugin.
For now all I want is to have a "background.js" file which execute the "console.log('test');" instruction it contains when the script is called.
Thank you, webpack is hell
edit: adding files:
// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
filenameHashing: false,
chainWebpack: config => {
// add your custom entry point
config
.entry('background')
.add('./src/background.ts');
},
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{ from: 'manifest.json', to: 'manifest.json', flatten: true },
]),
]
}
}
content of "$vue inspect"
$vue inspect > https://pastebin.com/6F3zwLhC
What I tried:
exporting a function instead of my plain code:
export default function() {
console.log("gboDebug: background.ts dans export function");
}
// instead of just
console.log("gboDebug: background.ts dans export function");
at the end of the file adding this because I saw it somewhere:
export default null;
checked that my console.log was in the background.js bundled file
pasted the result of background.js in the navigator
played with the webpackJsonp global var the scripts creates
What I thought about:
having a npm script which 1-bundle-vue-webpack and then 2-transpile my file with babel-loader
playing with the library output option in webpack but I think it makes code available for use in a variable, it doesn't auto-execute code when loaded
webpack output in IIFE: https://webpack.js.org/configuration/output/#outputiife
In short – you don't need a bundler for transpiling a single typescript file. Just use tsc.
Specifically to this question where the Vue app is used as part of chrome extension, it may make sense to separate building an app and the extension related files.
Another possible option is to use something like Vue CLI Browser Extension Plugin.
I have a plain webpack app, index.html, main.js, that builds just fine.
I also have a self contained javascript file iframe.js, to be added to 3rd party sites that will add an iframe container referencing the webpack app:
<iframe src="https://webpack-app-domain.com/index.html">
I would like the webpack build to process iframe.js with process.env substitutions of the sort:
<%= process.env.IFRAME_URL %>
and let babel convert it to ES5 javascript and minify the output for production, but I do NOT want iframe.js to be part of the Manifest nor other dependencies introduced into the script.
It is not a webpack "entry".
If I place it in the /static folder it will get deployed, unaltered, but I cannot then customise it with any process.env variables, nor transpile, nor minify it.
If I add it as a separate webpack "entry", it gets transpiled and minified, but it also gets wrapped in a manifest function call: webpackJsonp(), yet I need the javascript to be self-contained.
How can I process this javascript file with the webpack build to satisfy my requirements?
Edit: Thanks for your replies. I applied an inline transform with the CopyWebpackPlugin to achieve my desired outcome:
const UglifyJS = require('uglify-js')
const babel = require("babel-core")
...
new CopyWebpackPlugin([
{
from: 'src/iframe.js',
to: '',
transform(content, path) {
let js = content.toString('utf8')
js = js.replace(new RegExp("process.env.IFRAME_URL", 'g'), env.IFRAME_URL)
.replace(new RegExp("process.env.ROOT_API", 'g'), env.ROOT_API)
let t = babel.transform(js, {
presets: ["env"]
})
if (t.error) throw t.error
js = t.code
let min = UglifyJS.minify(js)
if (min.error) throw min.error
js = min.code.toString()
return Buffer.from(js)
},
},
])
I'm not sure if this is the most elegant way but it does the job. It's duplicating the plugin pipeline that's otherwise bypassed.
I fail to see where manifest.json relates to this question.
My answer: Use externals paired with a custom command for a separate webpack build. It's not uncommon to have more than one compilation step in a project.
If you are using package.json, then you could add this to the scripts section, and if you are using command line then just make shell script or something.
NODE_ENV=some_env webpack --config webpack.iframe.config.js --progress --colors -d --output-path 'assets' --display verbose
Then you're free to separate the dependency build from the project build, and include the results as an external in your main project.
Have you tried using using copy-webpack-plugin?
This way you would run your normal build in parallel to copying a single file.
You can use the transform method to replace the contents of the file for process.env.* and output it to the destination you want.
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform(content, path) {
return optimize(content);
},
},
]),
],
};
It looks like my .eslintrc file is not found my gulp-eslint
I defined a lint task:
gulp.task('lint', function () {
gulp.src(['src/**/*.js', 'src/**/*.jsx'])
.pipe(eslint())
.pipe(eslint.format());
})
It runs but doesn't show any error.
My .eslintrc file is defined in src folder. I tried to move it to the root folder of my project but it didn't change anything.
It's a pretty simple file:
{
"parser": "babel-eslint",
"ecmaFeatures": {
"classes": true,
"jsx": true
},
"plugins": [
"react"
],
"extends": "eslint-config-airbnb"
}
When I run eslint src in the terminal, I get a bunch of eslint errors, which is fine.
Any idea what is not properly working?
According to the docs you need to fail on error in the pipe.
gulp.task('lint', function () {
// ESLint ignores files with "node_modules" paths.
// So, it's best to have gulp ignore the directory as well.
// Also, Be sure to return the stream from the task;
// Otherwise, the task may end before the stream has finished.
return gulp.src(['**/*.js','!node_modules/**'])
// eslint() attaches the lint output to the "eslint" property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe(eslint.failAfterError());
});
Just a heads-up, the documentation is extremely useful and succinct on using configuration files, their precedence of usage and how they are located. You can also add the path to specify the location of your configuration file for a particular pipe:
gulp.task('lint', function () {
gulp.src(['src/**/*.js', 'src/**/*.jsx'])
.pipe(eslint({ configFile: '.eslintrc'}))
.pipe(eslint.format())
.pipe(eslint.failAfterError())
})
In the gulp-eslint documentation it should be noted that usage of the failOnError() and failAfterError() methods are advisable in that the task/stream is stopped and hence there is no invalid code written to the output.
If you use neither then the error is still caught but displayed only in the console output. So dependent on your task flow and design the destination file may still be written but you can conveniently correct the error immediately and carry on without having to start up your pipe processing/watch task again. An alternative is to look into gulp-plumber or some other means whereby you're not breaking out of a gulp watch task and yet also not writing a file containing code that doesn't pass linting validation.
I am learning browserify and I am trying to do two basic things with it:
Transform (via shim) non-CommonJS modules for ease-of-use and dependency tracking
Bundle the libraries that are project-specific
I've found a working process for how to do all of this and automate it with Gulp. This works and produces the right output but, I am curious if it could be made simpler. It seems like I have to duplicate a lot of configuration on the project-based bundles. Here is the working example:
package.json
invalid comments added for clarification
{
//project info and dependencies omitted
//https://github.com/substack/node-browserify#browser-field
"browser": { //tell browserify about some of my libraries and where they reside
"jquery": "./bower_components/jquery/dist/jquery.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.js"
},
"browserify": {
//https://github.com/substack/node-browserify#browserifytransform
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
//shim the modules defined above as needed
"jquery": {
"exports": "$"
},
"bootstrap": {
"depends": "jquery:$"
}
}
}
config.js
contains all task-runner related configuration settings
module.exports = {
browserify: {
// Enable source maps and leave un-ulgified
debug: true,
extensions: [],
//represents a separate bundle per item
bundleConfigs: [
{
//I really want to refer to the bundles here made in the package.json but
//if I do, the shim is never applied and the dependencies aren't included
entries: ['/bundles/shared-bundle.js'],
dest: '/dist/js',
outputName: 'shared.js'
}
]
},
//...
};
shared-bundle.js
acts as a bundling file where node loads the dependencies and at this point, the shim has been applied
require('bootstrap');
browserify-task.js
contains the browserify bundling gulp task
//module requires omitted
gulp.task('browserify', function (callback) {
var bundleQueue = config.bundleConfigs.length;
var browserifyBundle = function (bundleConfig) {
var bundler = browserify({
entries: bundleConfig.entries,
extensions: config.extensions,
debug: config.debug,
});
var bundle = function () {
return bundler.bundle()
// Use vinyl-source-stream to make the stream gulp compatible
.pipe(source(bundleConfig.outputName))
// Specify the output destination
.pipe(gulp.dest(bundleConfig.dest))
.on('end', reportFinished);
};
var reportFinished = function () {
if (bundleQueue) {
bundleQueue--;
if (bundleQueue === 0) {
// If queue is empty, tell gulp the task is complete
callback();
}
}
};
return bundle();
};
config.bundleConfigs.forEach(browserifyBundle);
});
In config.js where the first bundleConfig item's entries is a source to a file that has the require() modules, I'd like replace those with module names of modules defined in the package.json browser key.
In the config.js, if I change the bundle configuration to:
bundleConfigs: [
{
entries: ['bootstrap'],
dest: '/dist/js',
outputName: 'shared.js'
}
]
and run the gulp task, it will include bootstrap.js but it doesn't run the shim transformation. jQuery is not being included at all.
This leaves me with a few questions:
Is there a better way to be bundling my js for use in a non-SPA application (ie am I going about this the wrong way)?
If not, is there a way to ensure the shim transformation is run prior to the bundling so that I can have my bundle configuration in one place?
Certainly, you just have to tell your gulp file that it should shim first. Looks like you can add your own shim object when calling browserify from your gulp file. Check out this example
If you want to ensure everything is shimmed before you bundle them, use the deps array: "An array of tasks to be executed and completed before your task will run."
It would look something like this:
gulp.task('shim', function() {
// ...
});
gulp.task('browserify', ['shim'], function(){
// ...
});