Navigation

[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
}
LogoGitBook

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