tieptk/webpack
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update file readme.md

Browse Source
This commit is contained in:
Tieptk
2023-04-05 14:50:48 +07:00
parent 21e0d89cd0
commit e25b4be998
1 changed files with 128 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
README.md
View File

@@ -1,43 +1,30 @@
<div class="md-contents" style="font-size:18px;line-height:1.75;"> 1. Cài đặt webpack
Bước 1: Cài đặt Node.js và npm
<h2>1. Cài đặt webpack</h2> 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><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> Bước 2: Khởi tạo npm
<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ư Khởi tạo bằng lệnh :
mục gốc dự án và thêm các cài đặt sau:</p> npm init
<b>Ví dụ:</b>
Sau khi chạy xong lên trên thì trong thư mục sẽ có 1 file package.json
Bước 3: Cài đặt webpack
Sử dụng lệnh sau để cài đặt webpack và webpack-cli:
npm install webpack webpack-cli --save-dev
Sau khi hoàn thành thì file package.json sẽ có nội dung như thế này:
Ví dụ:
Bước 4: Tạo một tệp cấu hình webpack
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 webpack.config.js mới trong thư mục gốc dự án và thêm các cài đặt sau:
Ví dụ:
<pre style=" background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
<code class="language-javascript">
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
entry: './src/index.js', entry: './src/index.js',
@@ -46,53 +33,35 @@
filename: 'bundle.js' filename: 'bundle.js'
} }
}; };
</code>
</pre>
Entry: 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><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 Output : 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
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> Bước 6: Chạy webpack
<h3>2.1 Cấu hình đường dẫn đến tệp JavaScript chính với <b>Entry</b></h3>
<ul> Để chạy webpack, sử dụng lệnh sau:
<li>Để chỉ định tệp JavaScript chính cho webpack, có thể sử dụng tùy chọn <b>Entry</b>.</li>
</ul> npx webpack
<b>Ví dụ:</b>
<pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;"> 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.
<code>
2. Hướng dẫn chi tiết về các cài đặt cơ bản webpack.config.js
2.1 Cấu hình đường dẫn đến tệp JavaScript chính với Entry
Để chỉ định tệp JavaScript chính cho webpack, có thể sử dụng tùy chọn Entry.
Ví dụ:
module.exports = { module.exports = {
entry: './src/index.js', entry: './src/index.js',
// ... // ...
}; };
</code>
</pre>
<ul> Trong ví dụ này, đang chỉ định rằng tệp JavaScript chính là ./src/index.js.
<li>Trong ví dụ này, đang chỉ định rằng tệp JavaScript chính là <b>./src/index.js</b>.</li> 2.1.2 Cấu hình tên và đường dẫn cho tệp đầu ra với Output
</ul> Để 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 Ouput.
Ví dụ:
<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'); const path = require('path');
module.exports = { module.exports = {
@@ -103,22 +72,13 @@
}, },
// ... // ...
}; };
</code>
</pre>
<ul> Trong ví dụ này, đang chỉ định rằng tệp đầu ra là ./dist/bundle.js.
<li>Trong ví dụ này, đang chỉ định rằng tệp đầu ra là <b>./dist/bundle.js.</b></li> 2.1.3 Cấu hình các loader để xử lý các loại tệp khác nhau với module
</ul> 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 module.rules.
Ví dụ:
<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 = { module.exports = {
entry: './src/index.js', entry: './src/index.js',
output: { output: {
@@ -132,41 +92,19 @@
}, },
// ... // ...
}; };
</code>
</pre>
<ul> Trong ví dụ này, đang sử dụng ts-loader để xử lý tệp typescript.
<li>Trong ví dụ này, đang sử dụng ts-loader để xử lý tệp typescript.</li> Có thể tham khảo thêm các ứng dụng khác như xử lý css,image Tại đây
</ul> 2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack
<b>Có thể tham khảo thêm các ứng dụng khác như xử lý css,image <a Webpack được phát triển khá nhiều plugin ví dụ: HtmlWebpackPlugin,CleanWebpackPlugin. Đây là một số plugin cơ bản hay được sử dụng nhất.
href="https://webpack.js.org/configuration/module/#rule" target="_blank">Tại đây</a></b> 2.1.4.1 HtmlWebpackPlugin có tác dụng tạo ra một tệp html có tiêu đề là webpack demo và đặt tên là index.html như ví dụ ở bên dưới:
<h3>2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack</h3> Để sử dụng được HtmlWebpackPlugin, chạy câu lệnh sau:
<ul> npm install --save-dev html-webpack-plugin
<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 Sau đó thì thêm các đoạn mã code bên dưới vào file webpack.config.js
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'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { module.exports = {
@@ -179,26 +117,15 @@
], ],
// ... // ...
}; };
</code>
</pre>
2.1.4.2 CleanWebpackPlugin có tác dụng xóa bỏ các tệp js,html,css.. đã được bundler trước đấy:
<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.. đã Để sử dụng được CleanWebpackPlugin, chạy câu lệnh sau:
được bundler trước đấy: npm install --save-dev clean-webpack-plugin
</p>
<ul> Sau đó thì thêm các đoạn mã code bên dưới vào file webpack.config.js
<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'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { module.exports = {
@@ -207,21 +134,13 @@
new CleanWebpackPlugin() new CleanWebpackPlugin()
] ]
}; };
</code>
</pre>
2.1.5 Sử dụng optimization cho cấu hình của webpack
Tùy chọn Optimization 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.
Thêm các dòng bên dưới vào file webpack.config.js để tối ưu hóa đóng gói file bundler:
<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: { optimization: {
minimize: true, minimize: true,
minimizer: [ minimizer: [
@@ -230,127 +149,73 @@
}), }),
], ],
}, },
</code>
</pre>
<b>Ghi chú:</b> Ghi chú:
<ul> minimize: true chỉ định webpack nên tối ưu hóa đóng gói tập tin bằng plugin TerserPlugin để nén các tệp JavaScript
<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> Tuy nhiên optimization còn có tùy chọn SplitChunks:
để 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> 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
<ul> Sử dụng đoạn mã code bên dưới vào file webpack.config.js
<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: { optimization: {
splitChunks: { splitChunks: {
chunks: 'all', chunks: 'all',
}, },
}, },
</code>
</pre>
2.1.6 Tùy chọn resolve
Resolve khi thêm vào file webpack.config.js 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.
Sử dụng đoạn mã code bên dưới vào file webpack.config.js
<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: { resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'], modules: [path.resolve(__dirname, 'src'), 'node_modules'],
}, },
</code>
</pre>
<ul> Có thể sử dụng Extensions 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>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: { resolve: {
extensions: ['.js', '.jsx', '.json'], extensions: ['.js', '.jsx', '.json'],
}, },
</code>
</pre>
<b>Ghi chú:</b> Ghi chú:
<ul> ['.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>['.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 Tham khảo thêm ở đây
import 2.1.7 Chế độ (mode) trong Webpack
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 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
trả về Có 2 tùy chọn chính:
lỗi.</li> development
</ul> production
<a href="https://webpack.js.org/configuration/resolve/">Tham khảo thêm ở đây</a> Sử dụng đoạn mã code bên dưới vào file webpack.config.js
<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 = { module.exports = {
mode: 'development' mode: 'development'
} }
</code>
</pre>
<b>Ghi chú:</b> Ghi chú:
<ul> Chế độ development thực hiện một số ưu tiên riêng:
<li>Chế độ development thực hiện một số ưu tiên riêng:</li> Build nhanh
<ul> Ít tối ưu hoá code, nén code hơn.
<li>Build nhanh</li> Không xoá bỏ các comment trong code.
<li>Ít tối ưu hoá code, nén code hơn.</li> Cung cấp thêm thông tin lỗi và gợi ý
<li>Không xoá bỏ các comment trong code.</li> Cung cấp thêm khả năng debug tốt hơn.
<li>Cung cấp thêm thông tin lỗi và gợi ý</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>Cung cấp thêm khả năng debug tốt hơn.</li> 2.1.7 Watch mode trong webpack.config.js
</ul> Thêm đoạn mã bên dưới:
<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 = { module.exports = {
watch: true // Thêm mới dòng này watch: true // Thêm mới dòng này
} }
</code>
</pre>
<ul> Sau đó chạy lệnh:
<li>Sau đó chạy lệnh:</li> npm run dev
</ul>
<blockquote style="display: block;overflow: auto;padding: 10px;background-color: #f8f8f8;border-left: 3px solid Khi chúng ta thêm option này vào file config thì khi chạy câu lệnh npm run dev 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.
#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>