-
npm init --y
-
npm i webpack webpack-cli --save-dev
-
Trong file package.json: thiết lập private: true để không up lên thành thư viện npm registry và xoá file main
-
Gây ra 1 số vấn đề:
- Forced to download code không cần thiết
- Sai thứ tự hoặc thiếu sẽ làm app bạn không hoạt động đúng
- Khó hiểu và không rõ ràng dùng script
-
Di chuyển index.html vào thư mục dist và cài loadash vào devDependencies
-
Chỉnh lại script trong file index.html và dùng import trong file index.js:
- Import và export trong es6 và trình duyệt hiện đại có thể hiểu được. Tuy nhiên chỉ hỗ trợ với module js còn các file khác như hình ảnh thì không được
-
Chạy lệnh 'npx webpack', default(4x trở lên không yêu cầu file config) như sau:
- src/index.js build ra thành dist/main.js
- Tới đây sẽ có thắc mắc về npx: nếu không có sẽ cài tạm vô node_modules của dự án, webpack-cli thì cài vào devDependencies. Nếu đứng ngoài sẽ được tải và lưu trong cache của npx (~/.npm/_npx//node_modules). Để xóa cache npx: npx clear-npx-cache --all
- Webpack chỉ thay đổi import và export thôi, còn phần khác phải dùng babel thông qua webpack loaders
-
Tạo file webpack.config.js - file này được đọc ở node_modules/webpack-cli/lib/webpack-cli.js hàm loadConfig :
- Có thể dùng lệnh npx webpack --config webpack.config.js
- Shortcut npm run build : webpack
-
Quản lý asset:
-
Sửa lại script:
<script src="bundle.js"></script>
-
Cài đặt:
npm install --save-dev style-loader css-loader
-
XỬ LÝ CSS
-
Thêm module.rules(test: dùng regex để tìm file, use: dùng loader nào để xử lý file đó) trong webpack:
- test: /.css$/i
- style-loader: xử lý import vào js
- css-loader: thêm css vào DOM
- import vào file js, nếu không import là không được build. => import vào thẻ style file html
-
XỬ LÝ IAMGES:
-
Tương tự như css thêm test và type:
- test: /.(png|svg|jpg|jpeg|gif)$/i
- type: 'asset/resource'
- import vào css và file js đều được, nó sẽ build ra hình trong thư mục dist
-
XỬ LÝ FONTS:
- test: /.(woff|woff2|eot|ttf|otf)$/i,
- type: 'asset/resource',
- Có thể kết hợp với @font-face
-
XỬ LÝ FILE JSON(default), CSVS, TSV XML. 3 cái này dùng như sau:
-
Nhớ cài loader: npm install --save-dev csv-loader xml-loader
-
File json thì mặc định cho rồi nhưng dùng import default thôi. Dùng {} sẽ warning
-
test: /.(csv|tsv)$/i,
-
use: ['csv-loader'],
-
test: /.xml$/i,
-
use: ['xml-loader'],
-
-
MUỐN LOAD FILE NÀO THÌ TẢI LOADER FILE ĐỊNH DẠNG ĐÓ
-
LƯU Ý: CÓ THỂ NHÓM ASSETS LẠI CHO GỌN
-
PLUGINS:
- html-webpack-plugin: build html luôn và tự thay đổi script link tới file entry hữu dụng với output dùng name và hash
-
CÁC KỸ THUẬT:
- clean: true trong output
- devtool: inline-source-map // dùng để debug dễ hơn
- optimization.splitChunks: 'all', // dùng để đặt nhân tử chung với 2 file dùng 1 package.
- devServer.static: './dist', // thêm optimization.runtimeChunk: 'single' nếu nhiều hơn 1 entrypoint. Thêm shortcut này vào package.json : "start": "webpack serve --open",
-
TYPESCRIPT: https://webpack.js.org/guides/typescript/
-
VẤN ĐỀ VỀ CATCHING:
- Khi ở phía server không có gì thay đổi về CSS và JS thì phía client sẽ lưu lại trên cache trình duyệt (cache tĩnh)
- Cache động thì cần phải cập nhật trước khi truy xuất => lâu hơn cache tĩnh. Nên dùng cho lưu kết quả tìm kiếm google, dữ liệu ứng dụng
- Khi dùng output với hash thì mỗi lần build(dù không thay đổi) sẽ tạo ra một file mới. Dùng optim
-
TRUYỀN BIẾN QUA NPX VÀ NPM: tham khảo https://webpack.js.org/api/cli/#commands
- Khi webpack config sử dụng exports bằng function thì "environment" sẽ được truyền như sau:
- npx webpack --env prod (args sẽ nhận được {prod: true})
- npx webpack --node-env production # process.env.NODE_ENV = 'production'
- module.exports(env, args) #log ra để xem thử
- Khi webpack config sử dụng exports bằng function thì "environment" sẽ được truyền như sau:
-
webpack-learning's Introduction
webpack-learning's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.