I'm setting up my environment to develop a polymer 1.0 application using ES6/babel.
I also want to integrate webpack, so that I can use import statements in my javascript code.
I use gulp as a build tool. This is a (simplified) gulpfile for my project:
var gulp = require('gulp');
var gulpif = require('gulp-if');
var crisper = require('gulp-crisper');
var webpack = require('gulp-webpack');
gulp.task('default', function() {
gulp.src('src/*.html')
.pipe(gulpif('*.html', crisper()))
.pipe(gulpif('*.js', webpack({
loaders: [
{
test: /\.js$/,
exclude: [/node_modules/],
loader: 'babel-loader?sourceMap=true'
}
]
})))
.pipe(gulp.dest('dist'));
});
This works if I use gulp-babel instead of gulp-webpack. But so I get the following error:
[10:28:38] Using gulpfile E:\Dokumente\polymer\test-gulp-webpack\gulpfile.js
[10:28:38] Starting 'default'...
[10:28:38] Finished 'default' after 225 ms
[10:28:38] Version: webpack 1.12.2
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' E:\Dokumente\polymer\test-gulp-webpack\src\index.js in E:\Dokumente\polymer\test-gulp-webpack
The src directory contains only a index.html with the following content:
<html>
<body>
<h1>TEST</h1>
<script>
var test = "TEST";
</script>
</body>
</html>
Any suggestion how I can fix this? Maybe tell crisper to temporarily write the javascript to the filesystem? Or maybe use some fancy loader for webpack?
Related
We have a SDK project witch is depended by another two projects.
When we want to build whole application, firstly, we need to build SDK project and upload it. Then we can build another two projects after run npm install.
This time I want to add a script for developer. When I run the script in SDK project it I can save the built output files to another projects node_modules.
Here is my code.
package.json file:
{
...
"scripts": {
"build:dev": "webpack --mode=development",
...
}
...
}
webpack.config.js file:
let config = {
...
module: {
rules: [
{
test:/\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
}
...
}
module.exports = (env, argv) => {
if(argv.mode === 'development') {
// We put all the projects in one repo
config.output.path = path.resolve(__dirname,'../another-project/node_modules/sdk/dist/bundle')
}
}
And at last we set outDir in tsconfig.json.
The problem is:
How to change the output file path for typescript declaration files by WebPack arguments?
How to save all the file to two places one time?
I figure out the last problem by using webpack -env xxx && webpack -env xxx. I just run script twice, maybe someone has better idear.
Now just one qusetion:
How to set the output file path for typescript declaration files dynamically?
webpack.config.js file:
let config = {
...,
module: {
rules: [
{
test:/\.tsx?$/,
use: 'ts-loader',
options: {
configFile: "tsconfig.server.json"
}
}
]
},
...
}
Then I can change configFlie in webpack module.
https://webpack.js.org/configuration/output/
module.exports = {
...
output: {
filename: "lib.js"
}
...
Configuring the out dir in typescript will not help you because webpack is the one responsible for compilation and will only use typescript for compilation after outputting the files itself.
We want to migrate from gulp to webpack on a rather big and old website. Gulp just concat and minify JS & CSS files at the moment. I want to migrate to webpack because another front dev made some react modules that are compiled by browserify cmd in another folder:
we work in a webapp/ folder, minified files are located here :
js/app.min.js
jslib/vendors.min.js
css/app.min.css
sources files are :
js/
file1.js
file2.js
...
jslib/
jquery-1.11.2.min.js
jquery.fancybox.js
...
jquery.very-old-dependency-not-on-npm.min.js
css/
style.css
extra.css
my goal is to keep this file split for javascript by using two files, app.js and vendors.js. These 2 files should be, ideally, ES6 files that import other files.
Actually i'm looking for a way to do a simple concatenation / minification of JS files through the 2 es6 files with imports. Webpack is checking for dependencies and to overcome the "jquery is not defined" errors i added the webpack.providePlugin and the resolve.alias part in webpack.config. But this loads jquery in my app.min.js file and i don't want it for performance purposes. I'm aware that all libs should be npm installed and required/imported in es6 context for an optimized webpack use, but some old jquery libs are not available on npm in the version i want so i have to go with the files already in the project.
vendors.js :
import "./jquery-1.11.2.min.js";
import "./jquery.fancybox.js"
app.js :
import "./file1.js"
import "./file2.js"
webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
'/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
'/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
},
output: {
path: path.resolve(__dirname),
filename: '[name].min.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
],
resolve: {
alias: {
jquery: path.resolve(__dirname+'/../../jslib/jquery-1.11.2.min.js')
},
},
}
all my paths are ok (the folder location of the current gulp / future webpack is not in assets folder ) and webpack is successfully running, i just want to find a clean way to perform a simple concat / minify without including jquery in my app file before going further.
Here is an example of using jquery in an html file external
As for the names of app and vendors, you must change this part
entry: {
'/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
'/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
},
for this
entry: {
app: path.resolve(__dirname + '/../../js/app.js'),
vendors: path.resolve(__dirname + '/../../jslib/vendors.js'),
},
Do not add jquery to import if you want it to be added from outside. Remove jquery from vendors.js
I hope I helped.
I want to build a SPA with javascript knockout components
After lots of reading and fiddling I still can't seem to get a working javascript(no typescript) knockout( with components) project with webpack.
I found simple knockout projects but can't get them working with webpack.
Does someone have a demo project wit at least one ko component using webpack?
The Yeoman generator-ko-spa (in javascript) working with Webpack would be great.
Thnx
Here's how to set up a "Hello world" app from scratch:
Installing packages
Create a new folder
Run npm init -y
Install webpack related modules:
npm install --save-dev webpack webpack-cli html-loader
For intellisense in your editor, install knockout
npm install --save-dev knockout
Create a npm command in the scripts section:
"scripts": { "build": "webpack" }
Configuring webpack
Create a webpack.config.js file:
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "index.js"),
module: {
rules: [
// This tells webpack to import required html files
// as a string, through the html-loader
{ test: /\.html$/, use: [ "html-loader" ] }
],
},
// You *could* include knockout in your bundle,
// but I usually get it from a CDN
externals: {
knockout: "ko"
}
}
Creating our component viewmodel & view
Create a folder named Components
Create Greeter.html
<h1 data-bind="text: message">...</h1>
Create Greeter.js
const greeterTemplate = require("./Greeter.html");
module.exports = {
viewModel: function(params) {
this.message = params.message;
},
template: greeterTemplate
};
Creating our entry points
Create an index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<greeter params="message: 'Hello world!'"></greeter>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="dist/main.js"></script>
</body>
</html>
Create an index.js file
const ko = require("knockout");
const greeter = require("./Components/Greeter");
ko.components.register("greeter", greeter);
ko.applyBindings({});
Build & browser
run npm run build, webpack will create a file in a dist folder
Open index.html in your browser. It should greet you with a "Hello world"!
I have yarn up and running, have figured out a bit how it works, and made my inroads into figuring out gulp, after having discovered how to install version 4 instead of the default version that throws deprecation errors.
Now I have installed 3 packages with yarn, and it has downloaded a LOT of dependencies. No problem, one can use a gulp file to combine those into one javascript(or so i'm told)
The only thing is, how do I do that whilst maintaining the yarn dependencies as yarn builds those up? How would I format my gulp task for combining the yarn libaries i've added?
My gulp task currently looks like this:
//Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('assets/dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'));
});
And this concatenates my scripts as it should, but when I wanted to add the yarn folder it hit me that yarn manages dependencies and what not so everything has it's correct dependency and such. I doubt I can just add them all to the same file and hope all is well.(or can I?)
I run this task with yarn run watch
I've added the following packages: html5shiv, jquery, modernizr
What would be the correct way to add the yarn files in in assets/node_modules?
After long searching I found https://pawelgrzybek.com/using-webpack-with-gulpjs/
which gave me the following solution:
Execute the command:
sudo yarn add global gulp webpack webpack-stream babel-core babel-loader babel-preset-latest
create a webpack.config.js file
enter in it:
module.exports = {
output: {
filename: 'bundle.js', // or whatever you want the filename to be
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: [
['latest', { modules: false }],
],
},
},
],
},
};
Then create a gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var webpackConfig = require('./webpack.config.js');
gulp.task('watch', watchTask);
gulp.task('default', defaultTask);
gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
.pipe(webpackStream(webpackConfig), webpack)
.pipe(gulp.dest('./assets/js')); // Or whereever you want your js file to end up.
});
function watchTask(done) {
// Wherever you stored your javascript files
gulp.watch('assets/javascript/*.js', gulp.parallel('scripts'))
done();
}
function defaultTask(done) {
// place code for your default task here
done();
}
Then in the directory execute yarn watch and have it run in the background where you can throw an eye on it now and then.
I'm starting VueJS, I started my code from the original Vue Loader Example and I tested running npm run dev or npm run build but a question emerge : Is there a way to place all the css from the components in one place (like styles.min.css).
I added bootstrap as dependencies in my package.json and but when I do a npm run build I can only find the build.js file in dist, that's all.
Thank you for your help.
There's a plugin for that
npm install extract-text-webpack-plugin --save-dev
and then configure it in your webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// other options...
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
]
},
vue: {
loaders: {
css: ExtractTextPlugin.extract("css"),
// you can also include <style lang="less"> or other langauges
less: ExtractTextPlugin.extract("css!less")
}
},
plugins: [
new ExtractTextPlugin("style.css")
]
}