All geek questions in one place

Customization and Best Practices Webpack css

I am new to webpack and would like to use it with reactjs, but now I have lost the confusion right now. I would like to know how css is processed in the process of developing a client site using webpack. I know that webpack combines all my js and bundles it like bundle.js, which I refer to in my html file as follows: <script src="http://localhost:3000/assets/bundle.js"></script> based on my webpack-dev server configuration. Now I also have a css file. Where is it going? so that my url refers to this in my html file. I understand that there is a style loader and css loader, as well as ExtractTextPlugin, but where is the way out? I saw that I can var css = require('path/customStyle.css') , but dos doesn't see where it appears? I do this in the index.jsx file. So the question is: how to do this, I can refer to my customStyle.css. What am I doing wrong or what will I skip Here is my project folder structure:

 |_source | |_js | |_js | | |_components | | |_ *.jsx | |_index.jsx |_assets | |_css | |_customStyle.css |__index.html

My webpack.config.js is as follows

 var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './source/js/index.jsx', output: { filename: 'bundle.js', publicPath: 'http://localhost:8090/assets' }, module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") } ] }, externals: { 'react': 'React' }, resolve: { extensions: ['', '.js', '.jsx','.css'] }, plugins:[ new ExtractTextPlugin("styles.css") ] }

The html file is as follows:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../node_modules/react/dist/react-with-addons.js"></script> <!-- like to link css here but don't know the path to link to --> </head> <body> <div id="container"> </div> <script src="http://localhost:3000/webpack-dev-server.js"></script> <script src="http://localhost:3000/assets/bundle.js"></script> </body> </html>

Any help with some background on how the web package works and how to get my styles would be fantastic.

+6
source share
3 answers

Your css will be linked with the Javascript file. There is no separate css file in your html. You can use the extract-text-webpack-plugin module to create a separate css file to create.

Also you can not specify absolute URLs in your html. Better use a template and try webpack to insert script tags using html-webpack-plugin. This will look like your template (example from YARSK):

 <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Yet Another React Starter Kit</title> <link rel="stylesheet" href="app.{%=o.webpack.hash%}.css" media="all"> </head> <body> <div id="app"></div> <script src="{%=o.htmlWebpackPlugin.assets.main%}"></script> </body> </html>

I suggest looking at the YARSK starter kit to see how this is done.

+4
source

html-webpack-plugin can generate index.html for you. If you need something more ordinary, this allows you to customize the template that it uses. I found this plugin very useful in practice.

In more detail I will tell about my chapter . It shows how various bits are connected to each other.

+2
source

You do not need to care about CSS with webpack. All he needs is that he finds them demanding. More important is how you organize them in your source folders. We had a big project, and since with all the components it became quite scattered. We decided to place the common style files in one place, and then the components specific to the component folder.

0
source

Source: https://habr.com/ru/post/982106/

More articles:


All Articles