I'm still trying to wrap my head around webpack, and coming from Gulp it's quite confusing. My project structure looks like:
./root
-- src
-- styles.scss
-- bin
-- node_modules
-- webpack.config.js
So just something super simple, I want to compile the styles.scss in the src directory and output it to the bin directory. I installed the following loaders:
style-loader
css-loader
sass-loader (also installed node_sass as a dependency)
Now I know I'm not grasping something very fundamental of Webpack here but here's my webpack.config.js:
module.exports = {
entry: './src/styles.scss',
output: {
path: './bin',
filename: 'styles.css'
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
When I run webpack in the root of my directory it looks like it works. But the styles.css file looks like it contains a bunch of JavaScript code. So I don't understand that and need some clarity. I'm vaguely guessing that you can't use webpack if you don't have any JavaScript files in your project (besides webpack.config.js of course...
I am by far no webpack expert, but to my understanding, this is exactly what webpack is supposed to do, according to it's own documentation:
Loaders
webpack can only process JavaScript natively, but loaders are used to
transform other resources into JavaScript. [...]
What this means is, even if you only include SCSS-Files, webpack will convert them into a JavaScript-File, which can then be included just like any other JS-File.
For example, if you changed your styles.css into styles.js, you would call it in the head of html with
<head>
...
<script type="application/javascript" src="styles.js" charset="utf-8"></script>
...
</head>
Despite this, your CSS, although called as and wrapped in JavaScript, will still be correctly treated as CSS.
Why would you want to do this?
Basically to save calls to the server.
Webpack gives you the opportunity, to bundle your JS, your [S]CSS and many other things into a single JS-File, which you will be able to fetch with a single call to the server, therefore saving lots of round-trip-times.
Still, the browser will interpret all the resources accordingly.
Related
In a simple Typescript program I require Node FFI with
import * as Electron from 'electron';`
import * as ffi from 'ffi';`
and then
mylib = ffi.Library('libmoi', {
'worker': [ 'string', [ 'string' ] ],
'test' : [ 'string', [] ]
} );
Linking that up via webpack yields
WARNING in ./~/bindings/bindings.js
Critical dependencies:
76:22-40 the request of a dependency is an expression
76:43-53 the request of a dependency is an expression
# ./~/bindings/bindings.js 76:22-40 76:43-53
The problem seems to be that FFI has a dynamic require and the fix seems to be to apply webpack.ContextReplacementPlugin in the webpack.config.js file.
This is a bit out of my reach, but an example for an Angular case is:
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
root('./src') // location of your src
)
]
Any idea how to do this for FFI?
Here is the answer: github issue comment on the Johnny-Five repo
Quoting from brodo's answer, this is what you do to stop webpack getting snarled up with "bindings" and similar:
... the webpack config looks like this:
module.exports = {
plugins: [
new webpack.ContextReplacementPlugin(/bindings$/, /^$/)
],
externals: ["bindings"]
}
I also had a similar issue, somehow, I managed to resolve it. I will first explain my understanding.
Main work of webpack is to bundle the separate code file into one file, by default it bundles all the code that is referenced in its tree.
Generally two types of node_modules:
To be used on browser side(angular, rxjs etc)
To be used on nodejs side(express, ffi etc)
It is safer to bundle browser side node_module but not safer to bundle node side node_module because they are not designed like that So the solution is below two steps:
Give appropriate target(node, electron etc) in webpack.config.js file e.g "target":'electron-renderer' by default it is browser
Declare node_side module as external dependency in your webpack.config.js file e.g.
"externals": {
"bindings": "require('bindings')",
"ffi": "require('ffi')"
}
Using Brunch as my build-tool for a front-end prototype, I am having difficulty setting up the UnCSS-plugin. I installed the Bootstrap 4-skeleton for a quick setup, and apart from UnCSS everything is running smoothly.
The error I get on brunch build --production is error: UnCSS: no stylesheets found. I configured the plugins like this:
plugins:
sass:
options:
includePaths: [
'bower_components/bootstrap/scss'
]
postcss:
processors: [
require('autoprefixer')
]
babel:
ignore: [
/^(bower_components|vendor)/
]
uncss:
options:
csspath: 'css/app.css'
htmlroot: 'public'
files: ['index.html']
The source files for the project are located in app: index.html in app/assets, main.scss (imports Bootstrap) and styles.css in app/stylesheets, and app.js in app/javascripts.
Brunch builds this to a folder named public, with styles in public/css/app.css and content in public/index.html. The question is, what is incorrect about the configuration of UnCSS? My understanding of it is that it works on the CSS output from the build, in which case the paths seem correct.
There is a question on SO from 2014 asking pretty much the same thing, but it was never answered.
I had not considered looking at the GitHub issues, wherein one specifically addressed this. In essence, as suggested by #1951FDG:
plugins:
uncss:
options:
ignore: [/\.\bactive\b/]
ignoreSheets: [/fonts.googleapis/]
files: ['public/index.html']
ignore: sample regex to ignore '.active' class
ignoreSheets: sample regex to ignore Google fonts
More importantly, this invocation of UnCSS reads the stylesheets linked in index.html to find the correct CSS-file, then processes it.
I'm new to the whole Node/NPM/Webpack world, so apologies if this is obvious.
I'm attempting to build a simple front-end project bundled with Webpack. I've got node installed, and have a package.json file configured. If I run "npm start" in my root directory, I get no errors from the console, and I'm able to go to "localhost:3000" in a browser and see my "hello, world" output.
My next task is to include a stylesheet, which contains a reference to an image, like this:
.myimg {background: url(path/to/file.jpg);}
With things set up like this, I can view the image via the webpack-dev-server (by going to localhost:3000 in a web browser), but if I build the project, the path to the image is wrong. I have no idea what I'm doing wrong, so I'm throwing this out to the Stackiverse in the hopes that somebody out there will know what stupid thing I'm doing.
Here's my package.json file:
{
"name": "webpack-test1",
"version": "0.0.1",
"description": "My project WTF.",
"private": true,
"scripts": {
"start": "node server.js"
},
"devDependencies": {
"css-loader": "^0.15.2",
"file-loader": "^0.8.4",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6"
},
"dependencies": {
"webpack": "^1.9.6",
"webpack-dev-server": "^1.8.2"
}
}
...and here's my webpack.config.js file:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
"./src/start.js"
],
output: {
filename: "bundle.js",
path: path.join(__dirname, 'build'),
publicPath: '/build/'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(png|jpg)$/, loader: 'file-loader' }
]
}
};
...and then the index.html file:
<!doctype html>
<html>
<head>
<title>Webpack Test</title>
</head>
<body>
<div class="imgtest">hello, world</div>
<script src="build/bundle.js"></script>
</body>
</html>
...the "start.js" file referenced in the config file:
require('./test.css');
console.log("y u no work?");
...and finally, the contents of the css file itself:
.imgtest { background: url(img/volcano.jpg);}
Like I said at the top, in webpack-dev-server world, the path to the image resolves properly, and it shows up as the background to the DOM element. In published world, the browser tells me it can't find the file, with Safari's console clearly showing a bad file path:
http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
The correct local path is this:
http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
Clearly, I'm doing something wrong, but I can't figure out what. Any help or advice is appreciated.
Thanks!
Okay...ugh. I just figured it out. The problem was with the "publicPath" variable inside webpack.config.js. I had this:
publicPath: '/build/'
...which in retrospect is obviously an absolute path. What I needed instead was this:
publicPath: './build/'
...which is a relative path. Things seem to work now.
UPDATE:
I'm still very new to Webpack, so all of this is still pretty confusing. Having said that...
I think I've gone about this the wrong way. My Webpack project has had an index.html file at the root of the project, and I was trying to use that both as the file the webpack-dev-server would hit AND what the build would use as its entry point. That was causing me no end of headaches, and I don't think any solution I hit upon really worked. Then I found this:
https://www.npmjs.com/package/html-webpack-plugin
This lets you create your index.html page from a template, which means it doesn't actually have to exist as a file. webpack-dev-server creates it on the fly and stores it in memory, and when you publish to your "build" folder, an index.html file gets created within that folder.
There may be a true "right" way to handle the problem I raised here, but this seems to work really well, and in a roundabout way, it solves my problems, since it ducks the whole path question entirely.
Anyway, this is kind of rambling. I hope it helps somebody, and/or I hope somebody who knows more about this comes here and sets me straight.
ERROR that I had faced was
Module parse failed: PATH:\TO\IMG\XYZ.PNG Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
.
.
.
.
.
# ./~/css-loader!./~/sass-loader!./node/static/sass/style.scss 6:399692-399747
This solves my problem:
module: {
.
.
.,{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
root: path.resolve('./node/static/sass')
},
{
test: /\.(jpe?g|gif|png)$/,
loader: 'file-loader?emitFile=false&name=[path][name].[ext]'
}
]}
Run your webpack again.
Append all the background: url('~/../somePath/toImage.png');
> thunderbolt#0.0.1 react-build PATH:\TO\PROJECT
> webpack --watch --display-error-details --display-cached --content-base ./
Hash: f6e4cbbf0068b5792247
Version: webpack 1.13.2
Time: 4882ms
Asset Size Chunks Chunk Names
js/bundle.js 760 kB 0 [emitted] main
css/bundle.css 393 kB 0 [emitted] main
+ 180 hidden modules
Child extract-text-webpack-plugin:
+ 76 hidden modules
to explain in short, what file loader does is - it copies the file to a new path and puts that path in the css, for my case CSS file was nested within some public folder, whereas file loader would paste it in root of public, with path=[path] defined it would still manpulate the relative path. Thus disabling this completely solves my problem of relative paths and to add I have nested images folder so this evades the challenge of resolving these paths too. And dual copy of same images is something i dont need.
This is a config file in the /themes/ifd/js/ folder:
require.config({
// Initialize the application with the main application file
deps: ['plugins/console', 'main'],
baseUrl: '/themes/ifd/js/components'
paths: {
jquery: 'jquery/jquery.min',
flexslider: 'flexslider/jquery.flexslider-min',
easydropdown: 'easydropdown/jquery.easydropdown.min',
bpopup: 'bpopup/jquery.bpopup.min',
jqrangeslider: 'jqrangeslider/jQRangeSlider',
jqueryui: 'jquery-ui/js/jquery-ui-1.10.4.custom.min'
// More additional paths here
},
shim: {
jqueryui: 'jquery'
},
// Prevent caching issues, by adding an additional URL argument
urlArgs: 'bust=' + (new Date()).getDate()
});
I've got a main.js file in the /themes/ifd/js folder too:
require([
// Require the modules
'modules/module',
'jquery',
'flexslider',
'easydropdown',
'bpopup',
'jqueryui',
'jqrangeslider'
], function (module) {
'use strict';
// Rest of a file
And rest of files (modules?) are inside /themes/ifd/js/components:
Screenshot of list of files
In my HTML I have:
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
The messages I see in Chrome console:
GET http://DOMAIN/themes/ifd/js/jquery.js 404 (Not Found) requirejs.js:34
GET http://DOMAIN/themes/ifd/js/flexslider.js 404 (Not Found)
I can't find what is wrong and why it doesn't search in components directory...
The entry point for requirejs is the main module specified in the html file.
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
requirejs loads '/themes/ifd/js/main.js' 1st. Now in the main.js file, require([...]) try to load in the module specified in the args but requirejs won't be able to find them.
The reason is that requirejs does not know about them since require.config (...) is not executed.
Need to have 'require.config (...)' in '/themes/ifd/js/main.js' to do all the settings
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.
The network activity you show us indicates that your configuration is completely ignored by RequireJS. And you say "Then i have that in my html":
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
You've shown the contents of /themes/ifd/js/main.js but it does not include your configuration, which apparently is in a different file.
The solution here would be to move your call to require.config into your main.js file, before your call to require.
It looks like you're just loading main.js and never telling RequireJS to use your config.
This RequireJS issue lists several ways to load both a config and a main -
put the config on the HTML before you require the top-level module.
load the config.js with another tag.
do a nested require() on the HTML file (require config than require your main).
do a nested require() inside main.js.
keep the configuration inside main.js
The best approach will vary based on your project structure, I've been doing 5 way more often than the others since I usually have a single entry-point for all pages, but in some cases I used 1 and 2.
Further down the page some code examples of these approaches are also shown.
I know we could use requirejs combine files into one js file.
such like the following config.
module.exports = {
baseUrl: 'js/',
mainConfigFile: 'src/js/common.js',
dir: 'scripts/',
optimize: 'uglify2',
modules: [
{
name: 'common',
include: [
'jquery',
]
}
]
};
my result into one file is
common.js
----------------
jquery.js
modernizr.js
common.js
my question is, do we still need to put a require.js file in scripts folder and to use the following format
<script data-main="scripts/common" src="scripts/require.js"></script>
or we could just use
<script src="scripts/common.js"></script>
as files are compressed into one file?
You still need to load require.js the usual way to actually make use of the module loading benefits that it provides, and especially if you use the asynchronous functionality a lot. However, you can have a look at almond providing your code uses AMD and (from the README):
optimize all the modules into one file -- no dynamic code loading.
all modules have IDs and dependency arrays in their define() calls -- the RequireJS optimizer will take care of this for you.
only have one requirejs.config() or require.config() call.
do not use RequireJS multiversion support/contexts.
do not use require.toUrl() or require.nameToUrl().
do not use packages/packagePaths config. If you need to
use packages that have a main property,
volo can create an adapter module so
that it can work without this config. Use the amdify add command to
add the dependency to your project.
Almond is great because it doesn't need require.js at all; it wraps your own code with itself, which is a very minimal AMD loader skeleton and nowhere near as powerful as the main library. You then get a single optimised file that can be linked directly in your HTML:
<script src="scripts/common.js"></script>
The Gruntfile config for almond could look something like this:
compile: {
options: {
name: 'path/to/almond',
baseUrl: 'js',
include: ['main'],
insertRequire: ['main'],
mainConfigFile: 'scripts/config.js',
out: 'scripts/main.js',
optimizeAllPluginResources: true,
wrap: true
}
}
The above is all standard r.js boilerplate, you can find many more examples at the almond homepage.