14 KiB
14 KiB
<h2>1. Cài đặt webpack</h2>
<p><b>Bước 1:</b> Cài đặt Node.js và npm</p>
<p>Webpack cần Node.js và npm để hoạt động. Nếu chưa cài đặt Node.js và npm, có thể tải xuống từ trang chủ
của
Node.js (https://nodejs.org).</p>
<p><b>Bước 2:</b> Khởi tạo npm</p>
<ul>
<li>Khởi tạo bằng lệnh :</li>
</ul>
<blockquote style="display: block;overflow: auto;padding: 10px;background-color: #f8f8f8;border-left: 3px solid
#5488c7;margin: 0 0 1rem;">
<p style="margin: 0;
color: #818181;
font-style: italic;">npm init</p>
</blockquote>
<p>Sau khi chạy xong lên trên thì trong thư mục sẽ có 1 file package.json</p>
<p><b>Bước 3:</b> Cài đặt webpack</p>
<p>Sử dụng lệnh sau để cài đặt webpack và webpack-cli:</p>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
#5488c7; margin: 0 0 1rem;">
<p style="margin: 0;
color: #818181;
font-style: italic;">npm install webpack webpack-cli --save-dev</p>
</blockquote>
<p>Sau khi hoàn thành thì file package.json sẽ có nội dung như thế này:</p>
<b>Ví dụ:</b>
<img style="display: block;
margin: 10px 0;" class="progressive-img_full article-img" width="554" height="294"
src="https://repo.hurasoft.com/tieptk/webpack/raw/branch/master/webpack/dist/assets/images/file_package.png">
<p><b>Bước 4:</b> Tạo một tệp cấu hình webpack</p>
<p>Webpack sử dụng một tệp cấu hình để cấu hình cách webpack hoạt động. Tạo một tệp <b>webpack.config.js</b> mới
trong thư
mục gốc dự án và thêm các cài đặt sau:</p>
<b>Ví dụ:</b>
<pre style=" background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
<p><strong>Entry</strong>: Là file webpack sẽ bắt đầu làm việc và thực hiện viêc nạp file để thực hiện việc
bundler,
cần phải trỏ tên và đúng đường dẫn đến file code cần bundler</p>
<p><strong>Output</strong> : Nó sẽ có tác dụng chỉ cho webpack biết cần phải lưu file tên gì và được compile ra
đâu
</p>
<p><b>Bước 6:</b> Chạy webpack</p>
<p>Để chạy webpack, sử dụng lệnh sau:</p>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
#5488c7; margin: 0 0 1rem;">
<p style="margin: 0;
color: #818181;
font-style: italic;">npx webpack</p>
</blockquote>
<p>Lệnh này sẽ đóng gói mã nguồn JavaScript của bạn và lưu trữ nó trong thư mục đầu ra được chỉ định trong tệp
cấu
hình webpack.</p>
<h2>2. Hướng dẫn chi tiết về các cài đặt cơ bản webpack.config.js</h2>
<h3>2.1 Cấu hình đường dẫn đến tệp JavaScript chính với <b>Entry</b></h3>
<ul>
<li>Để chỉ định tệp JavaScript chính cho webpack, có thể sử dụng tùy chọn <b>Entry</b>.</li>
</ul>
<b>Ví dụ:</b>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
module.exports = {
entry: './src/index.js',
// ...
};
</code>
</pre>
<ul>
<li>Trong ví dụ này, đang chỉ định rằng tệp JavaScript chính là <b>./src/index.js</b>.</li>
</ul>
<h3>2.1.2 Cấu hình tên và đường dẫn cho tệp đầu ra với <b>Output</b></h3>
<ul>
<li>Để chỉ định tên và đường dẫn cho tệp đầu ra của webpack, Có thể sử dụng tùy chọn <b>Ouput</b>.</li>
</ul>
<b>Ví dụ:</b>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// ...
};
</code>
</pre>
<ul>
<li>Trong ví dụ này, đang chỉ định rằng tệp đầu ra là <b>./dist/bundle.js.</b></li>
</ul>
<h3>2.1.3 Cấu hình các loader để xử lý các loại tệp khác nhau với <b>module</b></h3>
<ul>
<li>Webpack sử dụng các loader để xử lý các loại tệp khác nhau, chẳng hạn như các tệp CSS, hình ảnh và cả
JavaScript.
Để cấu
hình các loader,có thể sử dụng tùy chọn <b>module.rules</b>.</li>
</ul>
<b>Ví dụ:</b>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.tsx?$/, use: 'ts-loader' },
]
},
// ...
};
</code>
</pre>
<ul>
<li>Trong ví dụ này, đang sử dụng ts-loader để xử lý tệp typescript.</li>
</ul>
<b>Có thể tham khảo thêm các ứng dụng khác như xử lý css,image <a
href="https://webpack.js.org/configuration/module/#rule" target="_blank">Tại đây</a></b>
<h3>2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack</h3>
<ul>
<li><b>Webpack</b> được phát triển khá nhiều plugin <b>ví dụ:
HtmlWebpackPlugin,CleanWebpackPlugin.</b> Đây là một số plugin cơ bản hay được
sử dụng
nhất.</li>
</ul>
<p><b>2.1.4.1 </b><b>HtmlWebpackPlugin</b> có tác dụng tạo ra một tệp html có tiêu đề là
<b>webpack demo</b> và đặt
tên
là
<b>index.html</b> như ví dụ ở bên dưới:
</p>
<ul>
<li>Để sử dụng được <b>HtmlWebpackPlugin</b>, chạy câu lệnh sau:</li>
</ul>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
#5488c7; margin: 0 0 1rem;">
<p style="margin: 0;
color: #818181;
font-style: italic;">npm install --save-dev html-webpack-plugin</p>
</blockquote>
<ul>
<li>Sau đó thì thêm các đoạn mã code bên dưới vào file <b>webpack.config.js</b></li>
</ul>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: 'webpack demo',
filename: 'index.html',
template: 'src/template.html'
})
],
// ...
};
</code>
</pre>
<p><b>2.1.4.2</b> <b>CleanWebpackPlugin</b> có tác dụng xóa bỏ các tệp js,html,css.. đã
được bundler trước đấy:
</p>
<ul>
<li>Để sử dụng được <b>CleanWebpackPlugin</b>, chạy câu lệnh sau:</li>
</ul>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
#5488c7; margin: 0 0 1rem;">
<p style="margin: 0;
color: #818181;
font-style: italic;">npm install --save-dev clean-webpack-plugin</p>
</blockquote>
<ul>
<li>Sau đó thì thêm các đoạn mã code bên dưới vào file <b>webpack.config.js</b></li>
</ul>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// ...
plugins: [
new CleanWebpackPlugin()
]
};
</code>
</pre>
<h3>2.1.5 Sử dụng optimization cho cấu hình của webpack</h3>
<ul>
<li>Tùy chọn <b>Optimization</b> trong cấu hình webpack cho phép cấu hình tối ưu hoá cho quá trình đóng gói mã
nguồn.
Tùy
chọn này bao gồm các tối ưu hoá như tối ưu hoá đóng gói, tối ưu hoá nén và tối ưu hoá tải trang.</li>
</ul>
<p>Thêm các dòng bên dưới vào file <b>webpack.config.js</b> để tối ưu hóa đóng gói file bundler:</p>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
}),
],
},
</code>
</pre>
<b>Ghi chú:</b>
<ul>
<li><b>minimize: true</b> chỉ định webpack nên tối ưu hóa đóng gói tập tin bằng plugin <b>TerserPlugin</b>
để nén
các tệp JavaScript</li>
</ul>
<p><b>Tuy nhiên</b> optimization còn có tùy chọn <b>SplitChunks</b>:</p>
<ul>
<li>Tùy chọn này cho phép cấu hình tách các module chung thành các tệp riêng biệt để tăng tốc độ tải trang</li>
</ul>
<p>Sử dụng đoạn mã code bên dưới vào file <b>webpack.config.js</b></p>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
optimization: {
splitChunks: {
chunks: 'all',
},
},
</code>
</pre>
<h3>2.1.6 Tùy chọn resolve</h3>
<ul>
<li><b>Resolve</b> khi thêm vào file <b>webpack.config.js</b> cho phép chỉ định các đường dẫn và tệp thêm mới
theo
từng dự án giúp cho việc import các module và tệp tin trong mã nguồn trở nên dễ dàng và rõ ràng hơn.</li>
</ul>
<p>Sử dụng đoạn mã code bên dưới vào file <b>webpack.config.js</b></p>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
</code>
</pre>
<ul>
<li>Có thể sử dụng <b>Extensions</b> cho tùy chọn resolve để chỉ định danh sách các phần mở rộng tệp tin mặc
định cho
webpack tìm kiếm.</li>
</ul>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
</code>
</pre>
<b>Ghi chú:</b>
<ul>
<li>['.js', '.jsx', '.json'] là danh sách các phần mở rộng tệp tin mặc định cho webpack tìm kiếm. Nếu
import
một tệp tin mà không chỉ định phần mở rộng, webpack sẽ tìm kiếm các tệp tin có phần mở rộng này trước khi
trả về
lỗi.</li>
</ul>
<a href="https://webpack.js.org/configuration/resolve/">Tham khảo thêm ở đây</a>
<h3>2.1.7 Chế độ (mode) trong Webpack</h3>
<ul>
<li>Việc thiết lập kịch bản môi trường nhằm tăng thời gian deploy và giảm thời lượng chờ không cần thiết. Chế độ
này
được
Webpack giới thiệu trong phiên bản</li>
<li>Có 2 tùy chọn chính:</li>
<ul>
<li>development</li>
<li>production</li>
</ul>
</ul>
<p>Sử dụng đoạn mã code bên dưới vào file <b>webpack.config.js</b></p>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
module.exports = {
mode: 'development'
}
</code>
</pre>
<b>Ghi chú:</b>
<ul>
<li>Chế độ development thực hiện một số ưu tiên riêng:</li>
<ul>
<li>Build nhanh</li>
<li>Ít tối ưu hoá code, nén code hơn.</li>
<li>Không xoá bỏ các comment trong code.</li>
<li>Cung cấp thêm thông tin lỗi và gợi ý</li>
<li>Cung cấp thêm khả năng debug tốt hơn.</li>
</ul>
<li>Chế độ production chậm hơn, tuy nhiên lại tối ưu tốt hơn kết quả đầu ra</li>
</ul>
<h3>2.1.7 Watch mode trong webpack.config.js</h3>
<ul>
<li>Thêm đoạn mã bên dưới:</li>
</ul>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code>
module.exports = {
watch: true // Thêm mới dòng này
}
</code>
</pre>
<ul>
<li>Sau đó chạy lệnh:</li>
</ul>
<blockquote style="display: block;overflow: auto;padding: 10px;background-color: #f8f8f8;border-left: 3px solid
#5488c7;margin: 0 0 1rem;">
<p style="margin: 0;
color: #818181;
font-style: italic;">npm run dev</p>
</blockquote>
<ul>
<li>Khi chúng ta thêm option này vào file config thì khi chạy câu lệnh <b>npm run dev</b> webpack sẽ luôn theo
dõi
các file,
bất cứ
thay đổi code nào sau khi ấn save sẽ được tự động build lại.</li>
</ul>