[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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="dist/style.css">
    <title>Document 1</title>
</head>
<body>
<script src="dist/app.js"></script>
</html>

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
}

GitBookapp.gitbook.com

C:\xampp\htdocs\test\webpack.config.js

Chú ý: Với phiên bản 2.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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document 1</title>
</head>
<body>
<script src="app.js"></script></body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<h1>kentrung heading 1</h1>
<h2>kentrung heading 2</h2>
<h3>kentrung heading 3</h3>
<h4>kentrung heading 4</h4>
<h5>kentrung heading 5</h5>
<h6>kentrung heading 6</h6>
<script src="main.js"></script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<h1>Webpack từ A đến Á cùng kentrung</h1>
<script src="main.js"></script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<h1>Webpack từ A đến Á cùng kentrung</h1>
<script src="main.js"></script>
</body>
</html>

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()
})

Previous------------------------Start webpack ----------------------NextWebpack từ A đến Á: Webpack watch mode (ok)

Last updated 4 years ago

hashtagVí dụ 1: Một ví dụ ngắn gọn chỉ sử dụng scss, sass

hashtagKết luận nó vẫn hoạt động tốt.

hashtagcss in js

hashtagGộp nhiều file js với nhau

hashtagTách riêng từng file js

hashtagVí dụ 2: Một ví dụ phức tạp hơn như tạo file html

hashtagBài toán về css, sass, scss

Ví dụ 1: Một ví dụ ngắn gọn chỉ sử dụng scss, sass

Kết luận nó vẫn hoạt động tốt.

css in js

Gộp nhiều file js với nhau

Tách riêng từng file js

Ví dụ 2: Một ví dụ phức tạp hơn như tạo file html

Bài toán về css, sass, scss