# 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! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://javascriptuse.gitbook.io/advanced/webpack-tu-a-den-a-webpack-dev-server-ok.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.