Bắt đầu với Webpack + React
Mục đích của hướng dẫn này là cài đặt môi trường phát triển cho một ứng dụng React được đóng gói bằng cách sử dụng Webpack. Mặc dù giá trị của Webpack và các gói khác liên tục được so sánh , hướng dẫn này sẽ cho phép bạn bắt đầu với Webpack và giúp bạn tự quyết định.
Sự phụ thuộc
Nếu bạn chưa có chúng, bạn cần cài đặt nút và npm . Hai công cụ này sẽ cho phép ta quản lý các phụ thuộc của bạn thông qua package.json . Trong folder dự án root , chạy npm init và trả lời các câu hỏi cài đặt để cài đặt package.json (các câu trả lời mặc định sẽ phù hợp với hầu hết user ).
Ngoài ra, ta cần các thư viện nút cho React và Webpack cộng với các thư viện để chuyển đổi. Điều này có thể được thực hiện bằng một chuỗi lệnh khi ở trong folder root :
-
npm install --save react react-dom create-react-class webpack -
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
Cấu trúc file
Webpack hoạt động bằng cách bắt đầu với một điểm nhập . Từ đây, Webpack xây dựng một biểu đồ phụ thuộc của ứng dụng của bạn cho các module cần được đưa vào để chương trình chạy bằng cách xem xét các câu lệnh import và require . Đối với ta , index.js sẽ là điểm vào đó. Tạo một folder dev làm nơi chứa index.js , nơi ta sẽ áp dụng các thay đổi của bạn . Ta cũng cần một folder src cho webpack để xuất gói ra.
mkdir dev src && touch dev/index.js
Bây giờ ta có thể điền index.js bằng mã demo:
var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');
var Index = createReactClass({
render: function() {
return (
<div>
<p>Webpack and React!</p>
</div>
);
}
});
ReactDOM.render(<Index />, document.getElementById('app'));
index.html
Trước khi ta tiếp tục Webpacking, ta cần vị trí thực tế mà gói của ta sẽ được tải. Điều này xảy ra trong index.html phải được tạo trong folder root và mã như sau:
<html>
<head>
<meta charset="utf-8">
<title>React and Webpack</title>
</head>
<body>
<div id="app" />
<script src="src/bundle.js" type="text/javascript"></script>
</body>
</html>
Cấu trúc file bây giờ sẽ trông như thế này:
.
├── dev
│ └── index.js
├── index.html
├── package.json
└── src
webpack.config.js
Bây giờ để cài đặt file webpack.config.js . Đây là tất cả thông tin webpack cần để xuất ra một gói có thể sử dụng được.
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "src");
var config = {
entry: {
Index : DEV + "/index.js"
},
output: {
path: OUTPUT,
filename: "bundle.js",
},
module: {
loaders: [{
include: DEV,
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
},
]
}
};
module.exports = config;
entry cho Webpack biết bắt đầu từ đâu, loaders cho Webpack biết cách xử lý phần mở rộng file đó và phải làm gì với nó, và output đưa ra hướng dẫn về vị trí và cách viết gói.
Đóng gói
Bây giờ ta đã có mọi thứ, ta sẽ có thể thấy ứng dụng của bạn đang hoạt động. Chạy ./node_modules/.bin/webpack --watch và trong vài giây, bạn sẽ thấy thông tin như sau:
➜ demo ./node_modules/.bin/webpack --watch
Webpack is watching the files…
Hash: 1594ffb6ae2044c83abe
Version: webpack 3.7.1
Time: 1477ms
Asset Size Chunks Chunk Names
bundle.js 863 kB 0 [emitted] [big] Index
[15] ./dev/index.js 468 bytes {0} [built]
+ 33 hidden modules
Tùy chọn --watch cung cấp cho ta làm mới khi tiết kiệm. Khi bạn thực hiện thay đổi và lưu, reload index.html trong trình duyệt của bạn sẽ tự động reload các thay đổi mới.
Ngoài ra, tạo alias cho lệnh biên dịch sẽ tiết kiệm ít nhất một vài lần hoàn thành tab: alias output="./node_modules/.bin/webpack"
Một ví dụ về trình tải khác
Đây là một trình tải khác, trình tải file-loader , được dùng để gói các file có phần mở rộng hình ảnh vào một folder có tên là images . Bạn có thể đọc thêm về loaders và cấu hình của chúng tại đây
...
module: {
loaders: [{
include: DEV,
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(jpe?g|png|gif)$/i,
loader:"file-loader",
query:{
name:'[name].[ext]',
outputPath:'images/'
}
}
]
}
...
Các tin liên quan
