[WEBPACK] 4. Webpack : CSS Loader (nghiepuit)
https://www.youtube.com/watch?v=yTc4Mk5cZF8&list=PLJ5qtRQovuEOqsMokakP9ue-y_jXhmCwJ&index=4
Ví dụ 1: css in js
C:\Users\Administrator\Desktop\webpack\webpack.config.js
var path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
C:\Users\Administrator\Desktop\webpack\package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5"
}
}
C:\Users\Administrator\Desktop\webpack\src\index.js
import './image.css';
import './image.js';
C:\Users\Administrator\Desktop\webpack\src\image.js
const image = document.createElement("img");
image.src = "https://loremflickr.com/320/240";
image.alt = "Lorem ipsum dolor sit amet";
document.body.appendChild(image);
C:\Users\Administrator\Desktop\webpack\dist\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
C:\Users\Administrator\Desktop\webpack\src\image.css
img {
border: 5px solid red;
padding: 5px;
}
Ví dụ 2: Tách file css
C:\Users\Administrator\Desktop\webpack\webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.js$/i,
exclude: /(node_modules)/,
use: 'babel-loader',
},
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: 'dist/',
},
},
'css-loader',
],
}
]
}
};
C:\Users\Administrator\Desktop\webpack\dist\main.css
img {
border: 5px solid red;
padding: 5px;
}
C:\Users\Administrator\Desktop\webpack\package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"mini-css-extract-plugin": "^0.11.2"
}
}
C:\Users\Administrator\Desktop\webpack\src\index.js
import './image.css';
import './image.js';
C:\Users\Administrator\Desktop\webpack\src\image.js
const image = document.createElement("img");
image.src = "https://loremflickr.com/320/240";
image.alt = "Lorem ipsum dolor sit amet";
document.body.appendChild(image);
C:\Users\Administrator\Desktop\webpack\dist\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
C:\Users\Administrator\Desktop\webpack\src\image.css
img {
border: 5px solid red;
padding: 5px;
}
