whs / piped-webpack Goto Github PK
View Code? Open in Web Editor NEWwebpack as a Gulp plugin.
Home Page: https://www.npmjs.com/package/piped-webpack
License: MIT License
webpack as a Gulp plugin.
Home Page: https://www.npmjs.com/package/piped-webpack
License: MIT License
Our project must be buildable on both *nix and Windows. However I just noticed that piped-webpack
outputs nothing on Windows while it works fine on macOS
. No files are generated, but the usual webpack logging seems to indicate that compilation was performed successfully. Is there something I can do to fix this? How can I diagnose what's happening?
Running my webpack config using the webpack
command directly generates files as expected.
Here is my webpack output when run by gulp:
Version: webpack 3.4.1
Time: 4460ms
Asset Size Chunks Chunk Names
lib.dll.js 9.25 MB 0 [emitted] [big] lib
[0] ./node_modules/process/browser.js 5.42 kB {0} [built]
[1] ./node_modules/react/react.js 56 bytes {0} [built]
...
[17] ./node_modules/react-redux/lib/index.js 475 bytes {0} [built]
[98] ./node_modules/redux/es/index.js 1.08 kB {0} [built]
[123] ./node_modules/react-dom/index.js 59 bytes {0} [built]
[140] ./node_modules/react-router/es/index.js 1.46 kB {0} [built]
[342] dll lib 12 bytes {0} [built]
...
+ 824 hidden modules
[13:23:49] Finished '_scripts_lib' after 4.7 s
Here is my gulp task:
gulp.task("_scripts_lib", function () {
return gulp.src([])
.pipe(pipedWebpack(require("./webpack.lib.config.js")))
.pipe(gulp.dest(SCRIPTS_OUTPUT_DIR));
});
and here is my webpack config file:
/* global __dirname process */
let path = require("path");
let Webpack = require("webpack");
const libName = "[name]_[hash]";
let config = {
resolve: {
modules: [
__dirname,
"node_modules"
],
extensions: [".js", ".jsx"]
},
entry: {
lib: [
"react",
"react-dom",
"react-router",
"redux",
"react-redux"
]
},
module: {
rules: [
// Process JS(X) files using Babel
{ test: /\.jsx?$/, loader: "babel-loader", include: [/scripts/], query: { presets: ["react", "es2015"] } },
]
},
plugins: [
new Webpack.DllPlugin({
name: libName,
path: path.join(__dirname, "[name].dll-manifest.json")
})
],
output: {
filename: "[name].dll.js",
library: libName
}
};
module.exports = config;
Just wanted to say that this plugin was very useful to us and fixed the issues we were having with DllPlugin
and webpack-stream
(the manifest json
file was never generated). This saved us a whole bunch of time.
Also, I thought this comment might help other people find a solution to similar issues! I didn't find much info about DllPlugin
not working as expected.
Anyway, thanks for making this plugin available! 💯
If gulp-changed
results in an empty pipe the plugin crashes.
I recently replaced it from webpack-stream
due to the DllPlugin
glitch. The latest in this situation was showing a message informing that webpack would not run because of an empty entry, but this plugin crashes instead telling WebpackOptionsValidationError: Invalid configuration object. ...
.
I’m using this webpack config to test the issue:
{
watch: true,
entry: {
react1: ['./src/components/react1.jsx'],
react2: ['./src/components/react2.jsx']
},
output: {
filename: 'components/[name].js',
path: path.resolve(__dirname, 'build-dev')
},
module: {
loaders: [
{ test: /\.jsx$/, loader: 'babel-loader' }
]
},
plugins: [
new webpack.DllReferencePlugin({
manifest: path.join('build-dev', 'components/common-manifest.json')
})
]
}
This works fine when run with webpack --watch
(only changed modules are emitted, and you must actually change the file, i.e. saving it with no changes doesn’t fire webpack). But using the same config with gulp ALL the components are always emitted.
This is the gulp code:
return gulp.src([])
.pipe(pipedWebpack(<config here>))
.pipe(gulp.dest(config.dst))
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.