![[Series] Học Webpack cơ bản - Bài 1: Webpack là gì?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6HwzNAucycQucGuVmP2RjTxcTJo4_rReCS152EeunoAWH3m-k5MLHJmUPtMeWvZOoxyHPIuM20b73xk9tmUHnyWlxkq0SDwLCP2VPQichKMW2PNiuTWm7-dVVCtdN-aXsdUYgNO0qea7C/s1600/webpack.png "[Series] Học Webpack cơ bản - Bài 1: Webpack là gì?") |
| [Series] Học webpack cơ bản - Bài 1: Webpack là gì? |
2. Tạo thử một module xem sao nhé. VD: sum.js
module.exports = (num1, num2) => num1 + num2
3. Tạo 1 file index.js import file module sum.js vừa tạo
var sum = require('./sum')
console.log(sum(5, 5))
4. Tạo 1 file index.html và nhúng file index.js vào để xem nó hoạt động được không nhé các bạn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
Tất nhiên là sẽ lỗi rồi đúng không các bạn vì JavaScript thuần đâu có hiểu key require. Đây chính là lúc Webpack được sử dụng.
Các bạn tạo 1 file webpack.config.js
var path = require('path')
module.exports = {
entry: './index.js', // File đầu vào
output: { // File đầu ra
filename: 'bundle.js', // Tên file
path: path.join(__dirname) // Nơi chưa file đầu ra
}
}
Các bạn hãy để ý file bundle.js sẽ được tự tạo thêm. Giờ sửa lại file index.html chút để sử dụng file bundle.js vừa được tạo ra bạn nhé.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Ok giờ chạy index.html để xem kết quả các bạn nhé.
Ở trên là mình sử dụng es5 cho 2 file index.js và module.js còn bạn nào muốn sử dụng es6 với cầu trúc es6 thì cần cài thêm các module babel-core, babel-preset-env, babel-loader.
Các bạn tạo thêm 1 file .babelrc
{
"presets": [
"env"
]
}
Lúc này cần sửa file webpack.config.js
var path = require('path')
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname)
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
}
Sửa 2 file index.js và sum.js sử dụng import và export
File index.js
import sum from './sum'
console.log(sum(5, 5))
File sum.js
export default (num1, num2) => num1 + num2
OK giờ các bạn chạy webpack rồi mở file index.html xem kết quả nhé các bạn.
![Sửa lỗi [TypeError: Network request failed] khi dùng fetch trong react native](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPE6roM1tYYheBU7h9vkhCexa71kA6WY_-uLbUqG0VuUMrxn4Yv-OFckXNpCJohIExASzYN-AyOBaQ_lA2nalkCTdCGI2GEbgmuQQQrCzi_uW0pd4HQBwT-9SDnNaAGmQBv6mTnfcFzGb/s72-c/react-native-la-gi.png "Sửa lỗi [TypeError: Network request failed] khi dùng fetch trong react native")
