Skip to content

Instantly share code, notes, and snippets.

@guilhermehn

guilhermehn/index.css

Created April 24, 2018 11:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guilhermehn/951fc92d976f515a1f5555abb252d508 to your computer and use it in GitHub Desktop.
Save guilhermehn/951fc92d976f515a1f5555abb252d508 to your computer and use it in GitHub Desktop.
Download ZIP
url-loader example
Raw
index.css
body {
/*
- image path should be relative
- taken from http://placehold.it/100x100
*/
background-image: url('./100x100.png');
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./build/main.js"></script>
</body>
</html>
Raw
index.js
import './index.css';
Raw
package.json
{
"name": "url-loader-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack && serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.11",
"serve": "^6.5.6",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
}
}
Raw
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './index.js',
output: {
path: path.resolve(__dirname, './build'),
filename: '[name].js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.css$/,
// parse css imports and then pass it's
// results to style-loader to create a style
// tag when the script is loaded by the browser
loader: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader',
options: {
limit: 1000
}
}
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment