Trong phần trước chúng ta đã cùng nhau tìm hiểu về cách cài đặt và cấu hình webpack4. Bạn nên đọc phần 1 trước khi đọc bài viết này.
Trong phần này chúng ta sẽ cùng nhau thử dựng một project nhỏ nhỏ dùng webpack 4 cho React và VueJS
Thiết lập webpack 4 với React
Trong phần trước chúng ta đã biết được cách cài đặt và cấu hình sử dụng babel trong webpack.
Cài đặt React
npm i react react-dom --save-dev
Tiếp theo cài thêm babel-preset-react
npm i @babel/preset-react --save-dev
Cấu hình cài đặt trước trong file .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Bạn có thể cấu hình babel-loader để đọc các file .jsx. Nó rất là hữu ích nếu bạn đang sử dụng các đuôi .jsx cho các Component của React.
Mở file webpack.conf.js và cấu hình loader như sau
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Để kiểm tra xem nó có chạy không, bạn có thể tạo một React Component bên trong ./src/App.js
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
Tiếp theo import component bên trong file ./src/index.js
import App from "./App";
Sau đấy chạy lại build
HTML webpack plugin
webpack cần thêm 2 component để xử lý HTML: html-webpack-plugin và html-loader
Thêm dependency như sau
npm i html-webpack-plugin html-loader --save-dev
Sau đó cập nhập cấu hình webpack
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
Tiếp theo tạo file HTML vào ./src/index.html như sau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
Chạy lại lệnh build
npm run build
Sau đó kiểm tra trong thư mục ./dist bạn sẽ thấy kết quả của HTML
Sẽ không cần phải thêm Javascript vào trong file HTML, file bundle sẽ tự động được thêm vào
Mở file ./dist/index.html trong trình duyệt, bạn sẽ nhìn thấy React Component chạy
Như bạn có thể thấy không có gì thay đổi liên quan đến việc xử lý HTML
webpack 4 vẫn là đóng gói các module liên quan đến Javascript
Nhưng đang có kế hoạch đưa HTML vào như một module (HTML như một entry point)
Cài đặt webpack 4 với Vue
Nếu bạn muốn sử dụng Vue bên trong các dự án webpack bạn có thể cài đặt thư viện như sau
npm i vue --save-dev
Kiểm tra hoạt động hay không bằng cách thay đổi nội dung trong file ./src/index.js như sau
import Vue from "vue";
const app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
});
Tiếp theo cấu hình webpack.conf.js để tải vue bundle
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js"
}
}
Bạn có thể chạy build lại và thấy rằng vue instance được đưa vào trong file HTML
Trích xuất css vào một file
webpack không biết cách trích xuất css vào một file
Trước đây chúng ta sử dụng extract-text-webpack-plugin. Đáng tiếc là plugin này không hoạt động được trên webpack4. Chúng ta có thể sử dụng mini-css-extract-plugin như một lựa chọn tốt hơn để thay thế. Chú ý rằng nó chỉ hoạt động tốt trên webpack 4.2.0
Cài đặt plugin và css loader như sau
npm i mini-css-extract-plugin css-loader --save-dev
Tiếp theo tạo css file để kiểm tra xem nó có hoạt động hay không
/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
}
Cấu hình cả plugin và loader trong webpack
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
Cuối cùng import css vào trong entry point
// // PATH OF THIS FILE: ./src/index.js // import style from "./main.css";
Chạy build
npm run build
Kiểm tra trong thư mục ./dist, bạn sẽ nhìn thấy kết quả của css
Webpack dev server
Chạy npm run dev bất cứ khi nào bạn thay đổi code không?
Nó chỉ mất một vài phút để cấu hình server development cho webpack
Sau khi cầu hình webpack dev server sẽ khởi chạy ứng dụng của bạn trong trình duyệt
Nó sẽ tự động refresh trình duyệt bất cứ lúc nào bạn thay đổi file
Để cài đặt webpack dev server, cần cài gói như sau
npm i webpack-dev-server --save-dev
Sau đó mở file package.json điều chỉnh scripts như sau
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
Lưu và đóng file
Nào, hãy thử chạy lệnh
npm run start
Bạn sẽ thấy webpack dev server đưa ứng dụng của bạn lên trình duyệt
