> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/webpack-tu-a-den-a-webpack-dev-server-ok.md). # Webpack từ A đến Á: Webpack dev server (ok) > Chú ý: Đã thay thế > > ``` > webpack-dev-server thành webpack serve kể từ 4.x trở đi đọc thêm: > ``` ``` For webpack-cli 3.x: "scripts": { "start:dev": "webpack-dev-server" } For webpack-cli 4.x: "scripts": { "start:dev": "webpack serve" } ``` Ở bài [trước](https://kentrung256.blogspot.com/2020/06/webpack-watch-mode.html) chúng ta đã học về chế độ watch mode để webpack có thể tự động build lại nếu có thay đổi code. Bài hôm nay chúng ta sẽ học cách tạo một **web server** đơn giản tại địa chỉ **localhost:8080** và tự động reload thông qua `webpack-dev-server` **Nội dung chính** * 1\. Chuẩn bị file * 2\. webpack-dev-server ### 1. Chuẩn bị file Code file `webpack.config.js` ban đầu ``` const path = require('path') module.exports = { entry: './src/index.js', output: { filename: 'name.js', path: path.resolve(__dirname, 'dist') } } ``` Tạo file `dist/index.html` ``` Webpack từ A đến Á cùng kentrung

Webpack từ A đến Á cùng kentrung

``` Tạo file `src/index.js` ``` console.log('Hello World!') ``` Vậy là xong phần chuẩn bị, phần tiếp theo chúng ta bắt đầu tìm hiểu về **webpack-dev-server** là gì? ### 2. webpack-dev-server `webpack-dev-server` giúp chúng ta tạo một web server đơn giản tại địa chỉ **** và tự động reload lại mỗi khi có thay đổi file. Để sử dụng chúng ta phải cài đặt nó thông qua npm ``` npm install webpack-dev-server --save-dev ``` Sau khi cài đặt xong chúng ta thay đổi file cấu hình `webpack.config.js` để báo cho máy chủ dev biết nơi tìm tệp ``` const path = require('path') module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { contentBase: './dist', } } ``` Việc tiếp theo là thiết lập một câu lệnh **npm run start** để chạy máy chủ dev trong file `package.json` ``` { "name": "webpack-demo", "version": "1.0.0", "description": "Học webpack từ A đến Á cùng kentrung", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --watch", "start:dev": "webpack serve" }, "keywords": [], "author": "kentrung", "license": "ISC", } ``` Khi thiết lập xong giờ chúng ta chạy webpack xem thế nào, riêng với **npm run start** thì chúng ta có thể viết tắt thành **npm start** ``` npm start ``` Khi chạy xong câu lệnh trên thì tự động trình duyệt được bật lên và mở trang index.html tại địa chỉ **** còn địa chỉ đầy đủ sẽ là ****
Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!