This might be a basic question but I'm really new to react and webpack.
How do I go about adding normalize.css and css frameworks?
I don't want to use bootstrap, instead I found a lightweight css framework called concise css. I'd like to use this since i'm mainly after the positioning and formatting of my elements and have more flexibility with my styles.
I've already installed css-loader and styles-loader.
I've read you can load styles to components by using
require("./path/to/css")
However, i'm still really confused by this.
You can put your require("./path/to/css") inside of your index.js or any other top-level React component. It will get bundled in your web pack for all child components from there.
Make sure you have your loaders installed in your package.json file and youur webpack.config.js file calls the loaders. A barebones webpack.config.js file that accomplishes this might look like:
module.exports = {
entry: [
'./app/index.js'
],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
Upon further reading, I realized normalize.css is very static and webpack works with more dynamic files.
So instead, I just got the cdn for normalize.css and use semantic-ui-react
Related
I'm using Webpack to build my front end components.
I have some React components which need classic webpack bundling, though I also have some vanilla JS files.
Those latter files are independent, so they won't get imported from React files. From my understanding, they need to be defined as entrypoints, so that Webpack reads and processes them. So far, so good.
The trouble is that I'd like Webpack to load them with Babel, and that's all, only give me back the JS file processed through Babel, I'm not interested in a bundle for these files.
Is it possible to do that? Only get the result of the babel loader, and not produce a bundle for some entrypoints?
Maybe I shouldn't use Webpack at all for these files?
Or maybe I should just set these bundles as 'library' so that I can reach them from the HTML pages?
What do you think guys?
Thanks by advance ;)
depends on how easy it is to find these files. I have a project that has similar requirement. What I have done is:
1/ put the vanilla js file in third_party/lib/
2/ import/require them in my current project
3/ set up my webpack.config.js as follows:
module.export = {
module: {
rules: [{
test : /.js$/,
exclude : /node_modules|third_party/,
loaders : ['babel-loader' /* other loaders? */],
},{
test : /third_party.*?\.js$/,
use: [{
loader : 'babel-loader' // or other loaders
},{
loader: 'file-loader'
options: {
name : '[path][name].[ext]',
outputPath : 'dist/third_party'
}
}]
}]
}
}
oh, you will need to npm i --save-dev file-loader
edit: I should clarify that this will bundle the vanilla js file as separate files to your main bundle, so you will have to import them by script tags yourself in your html file. (or if they were worker files, called by your script)
Webpack claims to manage module dependencies including image files. I understand that the following webpack config allows me to require jpg files from JS/CSS:
module.exports = {
module: {
rules: [
{
test: /\.jpg$/,
use: [ 'file-loader' ]
}
]
}
}
using url(/image.png) or require('./image.png'), but how would I include an image from an HTML file?
<img src="/image.png">
I know I can use copy-webpack-plugin to copy over static files into the output directory, but I'm wondering if there is a way to require images directly from HTML.
'html-loader' will do this for you by default, however if you are reading this behavior from your main index.html page, you will need to make webpack treat it as module also. Luckily html-webpack-plugin can do this for you in conjunction with html-loader: html-webpack-plugin.
I want to create a frontend library.
Therefore I want to use webpack. I especially like the css and image loader.
However I can only require non-JS files if I am using webpack.
Because I am building a library, I cannot garanty that the user of my library will too.
Is there I way to bundle everything into a UMD module to publish it?
I tried using multiple entry points, however I cannot require the module then.
You can find good guide for creating libraries in Webpack 2.0 documentation site. That's why I use ver 2 syntax in webpack.config.js for this example.
Here is a Github repo with an example library.
It builds all files from src/ (js, png and css) into one JS bundle which could be simply required as an umd module.
for that we need to specify the follow settings in webpack.config.js:
output: {
path: './dist',
filename: 'libpack.js',
library: 'libpack',
libraryTarget:'umd'
},
and package.json should have:
"main": "dist/libpack.js",
Note that you need to use appropriate loaders to pack everything in one file. e.g. base64-image-loader instead of file-loader
The comment written by #OlegPro is very helpful. I suggest every one to read this article for explanation of how these stuff work
http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6
You need the following for sure if you want to be able to import the bundle file in your project
output: {
path: path.resolve(__dirname, myLibrary),
filename: 'bundle.js',
library: "myLibrary", // Important
libraryTarget: 'umd', // Important
umdNamedDefine: true // Important
},
new to Webpack. I was thinking about migrating JS part of my application to it. However, I don't like the way it handles CSS. Would like to keep it easy and link them on my own. Unfurtunately documentation wasn't very helpful, same with the search results.
So, what do I need exactly?
Stylus compilation from lots of .styl files to static .css.
There will be three static stylesheet files (entry points?), but completely different from entry points of JS part of an application.
Also some "watch" feature, which would compile css when one of source .styl files has been changed.
Is there somebody who could point me in right direction, maybe write a config? Is this even possible with Webpack or should I stay with Grunt?
Thanks for any useful answer.
To learn more about the details of Webpack you can refer to this online book SurviveJS - Webpack, which will walk you through most of concepts related to Webpack.
To accomplish what you need you can start by creating webpack.config.js in the root of your project and it can be like this:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './entry.js', // you application entry point
output: {
filename: 'bundle.js', // resulting bundle file
path: './public' // the output folder path
},
module: {
loaders: [
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files
}
]
},
plugins: [
new ExtractTextPlugin('style.css') // output css bundle
]
};
Then require your stylus files in you entry.js file require('./style.styl');
Don't forget to install required loaders and plugins
npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin
Been working on an angular2 project for a while now, after updating it from angular1 (loving angular2 btw).
Now i would like to bundle the project, but unsure what is the best bundler to use?
Also i see some posts saying that they split the bundle into multiple files (like app.bundle.js and vendors.bundle.js) and others have 1 large file. What is the best method? I always throught that many files were better because browsers can download multiple files at the same time?
Do you need to use a gulp task for all this, or something else completely?
Also, how can i minify the HTML templates in an angular2 app?
You can either use Webpack or Systemjs-Builder to bundle your app. There are tons of seed projects from which you can take hints e.g. this and this and you can use this in your gulp task to inline the templates with your build.
Now i would like to bundle the project, but unsure what is the best bundler to use?
All answers to your questions will be subjective, but it is factual that Webpack offers plugins and configuration settings to suit your needs.
Also i see some posts saying that they split the bundle into multiple files (like app.bundle.js and vendors.bundle.js) and others have 1 large file. What is the best method?
Splitting into multiple files is definitely the most common method. It allows you to keep your application code separated from your dependencies, which makes debugging less of a nightmare.
The part of your Webpack config file that handles this might look something like this:
// our angular app
entry: { 'vendor': './src/vendor.ts', 'main': './src/main.ts' },
// Config for our build files
output: {
path: '',
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
Do you need to use a gulp task for all this, or something else completely?
If you use Webpack, then Gulp is not required at all. I'd recommend just using NPM scripts. Don't quote me on this, but I think Webpack can just flat out replace Gulp for Angular2 projects.
Also, how can i minify the HTML templates in an angular2 app?
Webpack has a HTML minify plugin for this.
You can use it like so:
loaders: [
{
test: /\.html$/,
name: "mandrillTemplates",
loader: 'raw!html-minify' // raw is another loader
}
]