2. Use webpack in Eleventy

alt text

1. Update gitignore

Thêm node_modules và site folders vào trong file .gitignore của project.

echo "node_modules" >> .gitignore
echo "_site" >> .gitignore # the build directory

2. Configure Eleventy

Tạo 1 file .eleventy.js vợi nội dung sau. Nó báo cho Eleventy hãy nhìn các files ở thư mục src và biên dịch chúng ra folder _site.

module.exports = function (eleventyConfig) {
  return {
    dir: { input: 'src', output: '_site' },
  };
};

3. Install Webpack

Chạy các lệnh sau để install Webpack và 1 vài các thư viện trợ giúp:

yarn add -D webpack webpack-cli npm-run-all rimraf

Tiếp theo, chúng ta sẽ tạo ra 1 file webpack.config.js cơ bản tại root project của bạn:

const path = require('path');
module.exports = {
  entry: './src/scripts/main.js',
  output: {
    path: path.resolve(__dirname, '_site/assets'),
    filename: 'main.js',
  },
};

File configuration này sẽ nói cho Webpack biên dịch file main.js ở trong thư mục src/scripts và xuất nó vào thư mục _site/assets.

Sau đó, thêm các scripts sau vào file package.json:

{
  "scripts": {
    "clean": "rimraf _site",
    "serve:webpack": "webpack --mode development --watch",
    "serve:eleventy": "ELEVENTY_ENV=development eleventy --serve",
    "serve": "npm-run-all clean --parallel serve:*",
    "build:webpack": "webpack --mode production",
    "build:eleventy": "ELEVENTY_ENV=production eleventy",
    "build": "run-s clean build:*"
  }
}

Đây là những điều scripts làm:

The serve script is what you'll use in development mode to preview your site.
The build script is for generating production builds.
The clean script deletes the _site folder to ensure old files don't make it into a new build.

4. Tạo 1 JavaScript file

Tạo 1 file src/scripts/main.js với nội dung:

alert('It works!');

5. Tạo một page

Đầu tiên, tạo 1 layout file tên src/_includes/layouts/base.njk mà tham chiếu đến file main.js script:

<!doctype html>
<html lang="en">
  <head>
    <title>2. Use webpack in Eleventy</title>
  </head>
  <body>
    
    <script src="/assets/main.js"></script>
  </body>
</html>

Sau đó, thêm một src/index.md mà sử dụng layout trên của bạn:

---
title: Home
layout: layouts/base.njk
---

# Hello world

Cuối cùng, chạy your local dev server:

npm run serve

Mở localhost:8080 và bạn sẽ nhìn thấy 1 alert message từ file JavaScript bundle. Chúc mừng, Webpack đã được tích hợp vào quá trình build site của bạn 🎉

2. Use webpack in Eleventy

1. Update gitignore

2. Configure Eleventy

3. Install Webpack

4. Tạo 1 JavaScript file

5. Tạo một page

Tags

Next Article

Previous Article