# \[WEBPACK] Làm một ví dụ compile scss, sass bằng WEBPACK full (ok)
## Ví dụ 1: Một ví dụ ngắn gọn chỉ sử dụng scss, sass
C:\xampp\htdocs\test\package.json
```
{
"name": "twentyseventeen",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.3",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
```
C:\xampp\htdocs\test\webpack.config.js
```
var path = require("path");
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/image.scss'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [{
loader: 'file-loader',
options: {
name: 'style.css',
},
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
],
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
};
```
C:\xampp\htdocs\test\index.html
```
Document 1
```
Sau cùng sử dụng @import xem nó còn hoạt động tốt???
```
@import "color";
```
C:\xampp\htdocs\test\src\_color.scss
```
@import "color";
body {
color: red;
background: $dark-opacity-light-200;
}
```
C:\xampp\htdocs\test\src\_color.scss
```
$dark-opacity-light-200: rgba(#8b8b96, 0.1);
```
#### Kết luận nó vẫn hoạt động tốt.
Chú ý: Cài đặt tên file css
Chú ý: muốn cho file js là minifile chúng ta phải có tham số
## css in js
```
optimization: {
minimize: true
}
```
{% embed url="" %}
C:\xampp\htdocs\test\webpack.config.js
> Chú ý: Với phiên bản [2.2.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.0.0...v2.2.0) mini-css-extract-plugin để tách file nó không hoạt động
>
> ```
> "mini-css-extract-plugin": "^0.11.2" nó thực hiện việc tách phai css được còn với phiên bản hiện tại 2.2.0 nó không hoạt động
> ```
```
var path = require("path");
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/image.scss',
'./src/image1.scss',
'./src/image2.scss'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name].css'
},
},
{
loader: 'postcss-loader'
},
{
loader: "sass-loader"
}
]
}
],
},
optimization: {
minimize: true
}
};
```
### Gộp nhiều file js với nhau
```
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/index2.js',
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bulder.js',
}
}
```
### Tách riêng từng file js
```
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
'./src/abc1':'./src/index1.js',
'./src/abc2':'./src/index2.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
}
}
```
## Ví dụ 2: Một ví dụ phức tạp hơn như tạo file html
C:\xampp\htdocs\test\package.json
```
{
"name": "twentyseventeen",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^0.11.3",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.3",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
```
C:\xampp\htdocs\test\webpack.config.js
```
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require("path");
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/image.scss'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css",
chunkFilename: '[id].css',
}),
new HtmlWebpackPlugin({
title: 'Wordpress 😋 ReactJs',
template: 'src/index.html',
filename: 'index.html'
})
],
module: {
rules: [{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: 'dist/',
},
},
'css-loader'
],
},
{
test: /\.s[ac]ss$/i,
use: [{
loader: 'file-loader',
options: {
name: 'style.css',
},
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
],
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
};
```
C:\xampp\htdocs\test\src\index.html
```
Document 1
```
C:\xampp\htdocs\test\src\index.js
```
console.log("aaaaaaaa")
```
C:\xampp\htdocs\test\src\image.scss
```
body {
color: red;
background-color: blue;
}
```
Ket qua
### Bài toán về css, sass, scss
***Bài toán 1: Tách nhiều file scss trong entry***
C:\xampp\htdocs\test\package.json
```
{
"name": "twentyseventeen",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.3",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
```
C:\xampp\htdocs\test\webpack.config.js
```
var path = require("path");
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/image.scss',
'./src/image2.scss',
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name].css',
},
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
],
},
};
```
C:\xampp\htdocs\test\src\a.scss
```
$base-color: #c6538c;
.pi {
color: red;
}
```
C:\xampp\htdocs\test\src\image.scss
```
.pi {
color: red;
}
body {
background: #c6538c;
}
```
C:\xampp\htdocs\test\src\image2.scss
```
.pi {
color: red;
}
p {
background: #c6538c;
}
```
***Ket qua:***
C:\xampp\htdocs\test\dist\image.css
```
.pi {
color: red;
}
body {
background: #c6538c;
}
```
C:\xampp\htdocs\test\dist\image2.css
```
.pi {
color: red;
}
p {
background: #c6538c;
}
```
***Bài toán 2.1: Sử dụng file css trong file js chưa tìm được file scss trong js***
> ***Chú ý: Đã tìm thấy cách rồi***
>
> ***Xem ở đây*** [***https://app.gitbook.com/@javascriptuse/s/advanced/webpack-tu-a-den-a-webpack-sass-loader-ok***](https://app.gitbook.com/@javascriptuse/s/advanced/webpack-tu-a-den-a-webpack-sass-loader-ok)
C:\xampp\htdocs\test\webpack.config.js
```
var path = require("path");
module.exports = {
mode: 'development',
entry: [
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
module: {
rules: [
{
test: /\.js$/i,
exclude: /(node_modules)/,
use: 'babel-loader',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
],
},
};
```
C:\xampp\htdocs\test\src\index.js
```
import './image2.css';
import './index2.js';
```
C:\xampp\htdocs\test\src\image2.css
```
.pi{
color:red
}
p{
background:#c6538c
}
```
C:\xampp\htdocs\test\src\index2.js
```
console.log("iiiiiiiiiiii2");
```
***Bài toán 2.2: Sử dụng file scss trong file js***
C:\xampp\htdocs\test\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",
"file-loader": "^6.2.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",
"sass-loader": "^7.2.0",
"sass": "^1.22.10"
}
}
```
C:\xampp\htdocs\test\webpack.config.js
```
const path = require('path')
module.exports = {
mode: "development",
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
// Prefer `dart-sass`
implementation: require("sass"),
},
},
],
},
],
},
}
```
C:\xampp\htdocs\test\src\index.js
```
import './scss/style.scss';
```
C:\xampp\htdocs\test\dist\index.html
```
Webpack từ A đến Á cùng kentrung
kentrung heading 1
kentrung heading 2
kentrung heading 3
kentrung heading 4
kentrung heading 5
kentrung heading 6
```
C:\xampp\htdocs\test\src\scss\colors.scss
```
$text-primary: #007bff;
$text-secondary: #6c757d;
$text-success: #28a745;
$text-danger: #dc3545;
$text-waring: #ffc107;
$text-info: #17a2b8;
```
C:\xampp\htdocs\test\src\scss\style.scss
```
@import './colors.scss';
h1 {color: $text-primary;}
h2 {color: $text-secondary;}
h3 {color: $text-success;}
h4 {color: $text-danger;}
h5 {color: $text-waring;}
h6 {color: $text-info;}
```
***Bài toán 3 Tách các file css đực sử dụng trong file js***
C:\xampp\htdocs\test\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:\xampp\htdocs\test\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:\xampp\htdocs\test\src\index.js
```
import './image.css';
import './image2.css';
import './image.js';
```
C:\xampp\htdocs\test\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:\xampp\htdocs\test\src\image.css
```
img {
border: 5px solid red;
padding: 5px;
}
```
C:\xampp\htdocs\test\src\image2.css
```
.pi{
color:red
}
p{
background:#c6538c
}
```
***Kết quả:*** C:\xampp\htdocs\test\dist\main.css
```
img {
border: 5px solid red;
padding: 5px;
}
.pi{
color:red
}
p{
background:#c6538c
}
```
***Bài toán 4.1 Nhập nhiều file cho mỗi key entry***
C:\xampp\htdocs\test\package.json
```
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^3.11.0"
}
}
```
C:\xampp\htdocs\test\webpack.config.js
```
const path = require('path');
module.exports = {
mode: "development",
entry: {
main: [
'./src/home.js',
'./src/slider.js'
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
}
}
```
C:\xampp\htdocs\test\dist\index.html
```
Webpack từ A đến Á cùng kentrung
Webpack từ A đến Á cùng kentrung
```
***Bài toán 4.2 Nhập nhiều file cho mỗi key entry***
~~*Hoặc dùng cách cũ này cũng được :)*~~
C:\xampp\htdocs\test\webpack.config.js
```
const path = require('path');
module.exports = {
mode: "development",
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
}
}
```
C:\xampp\htdocs\test\src\index.js
```
import "./home.js";
import "./my-test.js";
```
C:\xampp\htdocs\test\src\home.js
```
console.log('home.js')
```
C:\xampp\htdocs\test\src\my-test.js
```
console.log('kentrung test');
```
> Cũng cho kết quả giống nhau nhưng nó không hay bằng cách trên
***Bài toán 5 Để chính xác lỗi đến từ đâu, dòng bao nhiêu, file nào bị lỗi.***
webpack.config.js ***cần thêm*** devtool: 'inline-source-map
```
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map'
}
```
chọn chế độ **mode = development** sẽ dễ dàng debug
```
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
```
***Bải toán 6. 1 Dùng provide plugin của webpack để tự động tải jQuery***
C:\xampp\htdocs\test\package.json
```
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"jquery": "^3.6.0"
}
}
```
C:\xampp\htdocs\test\webpack.config.js
```
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: {
main: [
'./src/a.js',
'./src/b.js'
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
```
C:\xampp\htdocs\test\src\a.js
```
$('h1').css('color', 'white');
```
C:\xampp\htdocs\test\src\b.js
```
$('h1').css('background', 'purple');
```
***Bải toán 6. 2 Dùng cách import để tải jQuery***
C:\xampp\htdocs\test\webpack.config.js
```
const path = require('path')
module.exports = {
mode: 'development',
entry: {
main: [
'./src/a.js',
'./src/b.js'
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
```
C:\xampp\htdocs\test\src\a.js
```
import $ from 'jquery';
$('h1').css('color', 'white');
```
C:\xampp\htdocs\test\src\b.js
```
import $ from 'jquery';
$('h1').css('background', 'purple');
```
C:\xampp\htdocs\test\dist\index.html
```
Webpack từ A đến Á cùng kentrung
Webpack từ A đến Á cùng kentrung
```
***Bải toán 6. 3 Dùng provide plugin của webpack để tự động tải jQuery + bootstrap***
C:\xampp\htdocs\test\package.json
```
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "Học webpack từ A đến Á cùng kentrung",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
"keywords": [],
"author": "kentrung",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
}
}
```
C:\xampp\htdocs\test\webpack.config.js
```
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
```
C:\xampp\htdocs\test\src\index.js
```
import 'bootstrap';
$(document).ready(function(){
$('.carousel').carousel()
})
```
