370 lines
15 KiB
HTML
370 lines
15 KiB
HTML
<div class="md-contents" style="font-size:18px;line-height:1.75;">
|
|
|
|
<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 install</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;">
|
|
<code class="language-javascript">
|
|
const path = require('path');
|
|
module.exports = {
|
|
entry: './src/index.js',
|
|
output: {
|
|
path: path.resolve(__dirname, 'dist'),
|
|
filename: 'bundle.js'
|
|
}
|
|
};
|
|
</code>
|
|
</pre>
|
|
|
|
<b>Ghi chú:</b>
|
|
<p>Cần cài thêm path bằ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;">npm install --save-dev path</p>
|
|
</blockquote>
|
|
|
|
<p>Cần chia thành 2 Folder lớn: <b>disc</b> và <b>src</b></p>
|
|
<ul>
|
|
<li>Trong đó file disc sẽ chứa code html,image và file js được bundler ra của dự án</li>
|
|
<li>File <b>src</b> sẽ là file code <b>javascript</b> hoặc <b>typescript</b></li>
|
|
</ul>
|
|
|
|
<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>
|
|
</div> |