Webpack React

Bài học này sẽ hướng dẫn bạn cách tạo một project React.js với Babel bằng cách dùng Webpack, tự động trích xuất file minify Javascript.

Chuẩn bị

Trước khi bắt đầu, ta cần chuẩn bị các thao tác sau:

Trước tiên, nếu đang chạy mode Watch hoặc Dev Server, thì các bạn dùng npm run build để trả về mode ban đầu.
Xóa bớt các file không liên quan đi:
- /dist/main.js
- /dist/style.min.css
- /src/style.scss
Tạo file index.js bên trong thư mục src
Chỉnh lại webpack.config.js về ban đầu, để khỏi bị phân tâm các config khác ^^ (giữ cũng được nhé).
Tạo trước file .babelrc tại cùng cấp thư mục với file webpack.config.js
Khi này ta có cấu trúc thư mục như sau:

Webpack-project

node_modules
- ...
package.json
webpack.config.js
package-lock.json
dist
- index.html
src
- index.js

Các file lần lượt có nội dung sau:

Nội dung file `/dist/index.html`

Viết lại nội dung như sau:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Output Management</title>
  </head>
  <body>
    <div id="root"></div>
    <section>
      <h2>Đây là Headline</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa dolor, auctor ac volutpat id, molestie et velit. Etiam lectus massa, fringilla non egestas a, tristique vel sapien. </p>
    </section>
    <script type="text/javascript" src="main.min.js"></script>
  </body>
</html>

<div id="root"></div> nội dung React sẽ load tới thành phần này.
main.min.js sau khi cài đặt và thực thi thành công, thì Webpack sẽ tạo một file main.min.js bên trong thư mục dist, chúng ta có thể tùy chỉnh thư mục và tên file này.

Nội dung file code React `/src/index.js`

Viết nội dung mẫu cho file /src/index.js như sau:

class App extends React.Component {
  render() {
    return <h1>Hello React!</h1>;
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

Nội dung file `webpack.config.js`

Dọn dẹp lại file cho gọn, tránh bị phân tâm sang mấy cấu hình khác.

const path = require('path');

module.exports = {
  entry: [
    
  ],
  module: {
    rules: [
     
    ]
  }
};

Nội dung file `.babelrc`

Có thể tạo file này bằng bất kỳ chương trình editor nào, tạo file mới (Ctrl + N), thêm nội dung bên dưới, xong save file với tên .babelrc là được, đây là file cấu hình, sau khi cài đặt @babel/preset-env sẽ cần tới, nó cho phép sử dụng Javascript mới nhất.

{'presets':['env', 'react']}

Thao tác chuẩn bị tạm ổn rồi, tiến hành thôi.

Cài đặt Babel và thiết lập để chạy project React.js

Ta sẽ lần lượt tiến hành các bước sau:
- Cài đặt Babel (core, loader, preset-env, preset-react).
- Cài đặt react và react-dom.
- Chỉnh file config webpack.config.js.
- Chạy lệnh thực thi nội dung trên npm run watch.

Cài đặt Babel

npm install --save-dev babel-loader@7 babel-core babel-preset-env babel-preset-react

Giải thích một chút về bộ cài đặt bên trên:
- babel-loader@7: webpack helper giúp chuyển code dựa trên preset.
- babel-core: là API, giúp chuyển code ES5+ thành phiên bản Javascript tương thích trong các trình duyệt hiện tại hoặc cũ hơn.
- babel-preset-env: là một bộ cài đặt sẵn, cho phép sử dụng Javascript mới nhất, tùy chọn môi trường và tự động kích hoạt các plugin cần thiết cho môi trường đích cần hoạt động.
- babel-preset-react: giúp chuyển JSX (cú pháp của React) thành javascript.

Chú ý ở chỗ babel-loader@7, trên mạng hầu hết các bài hướng dẫn cài babel-loader, khi này mặc định sẽ cài phiên bản mới nhất, hiện tại là babel-loader ver 8, sẽ không chạy được một vài config từ file .babelrc.

Kết quả

Webpack React.js

Cài đặt `react` và `react-dom`

npm install --save react react-dom

Kết quả

Webpack React.js

Chỉnh file config `webpack.config.js`

const path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    './src/index.js'
  ],
  output: {
    filename: 'main.min.js',
    path: path.resolve(__dirname, 'dist/')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

entry:['./src/index.js']: file nguồn chúng ta code React.
Nội dung phần output: trả về file đích, với tên và thư mục có thể tùy chỉnh được.
Nội dung phần rules: dùng để load babel.

Chạy lệnh thực thi nội dung

Để không phải chạy lệnh thực thi nhiều lần mỗi khi thay đổi file /src/index.js, ta sẽ sử dụng mode Watch cho tiện.

npm run watch

Kết quả ta sẽ thấy bên trong thư mục dist đã được tạo một file main.min.js với nội dung đã được minify.

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var l=t[r]={i:r,l:!1,exports:{}};return...[DÀI LẮM @@]

Khi chạy trình duyệt file /dist/index.html ta sẽ thấy được nội dung như sau:

Hello React!

Đây là Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa dolor, auctor ac volutpat id, molestie et velit. Etiam lectus massa, fringilla non egestas a, tristique vel sapien.

Vậy là ta đã tạo được project React.js bằng Webpack, từ giờ các bạn chỉ cần thay đổi nội dung file /src/ract.js và save lại, thì file /dist/main.min.js sẽ được tự động cập nhật (nhớ bật mode Watch ^^).

Các lệnh chính đã sử dụng trong toàn bộ bài học

Bài học	Lệnh đã dùng
Cài đặt Webpack	cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli
Webpack bundle	npx webpack
Cấu hình Webpack	npx webpack --config webpack.config.js npm run build
Webpack quản lý output	npm run build
Webpack code splitting	npm install --save lodash npm run build npm run build
Cài đặt và setting HtmlWebpackPlugin	npm install --save-dev html-webpack-plugin npm run build
Cài đặt và setting CleanWebpackPlugin	npm install --save-dev clean-webpack-plugin npm run build
Webpack Cache	npm run build npm run build
Webpack gom chung các file javascript	npm run build
Webpack source map	npm run build npm run build
Webpack css loader	npm install --save-dev style-loader css-loader npm run build
Webpack minify CSS - OptimizeCSSAssetsPlugin	npm install --save-dev mini-css-extract-plugin npm install --save-dev optimize-css-assets-webpack-plugin npm run build npm run build
Webpack minify Javascript - TerserJSPlugin	npm install --save-dev mini-css-extract-plugin npm install --save-dev terser-webpack-plugin npm run build
Webpack watch mode	npm run watch
Webpack dev server	npm install --save-dev webpack-dev-server npm start
Webpack với SCSS	npm install --save-dev sass-loader node-sass webpack npm run watch
Webpack với React.js	npm install --save-dev babel-loader@7 babel-core babel-preset-env babel-preset-react npm install --save react react-dom npm run watch

Webpack React

Chuẩn bị

Nội dung file /dist/index.html

Nội dung file code React /src/index.js

Nội dung file webpack.config.js

Nội dung file .babelrc