每次寫完代碼都需要手動打包, 然后查看效果太麻煩了。怎么才能改完代碼立即就能查看镜沽？
webpack-dev-server
webpack-dev-server 能夠給我們開啟一個開發(fā)服務(wù)器尔艇。每當我們代碼改動后伤提，它會在內(nèi)存里打包题涨，并自動更新到瀏覽器蜈彼。
安裝
npm i webpack-dev-server -D
配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
clean: true
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/inline'
},
{
test: /\.txt$/i,
type: 'asset/source'
}
]
},
plugins: [new HtmlWebpackPlugin()],
devServer: {
host: 'localhost', // 啟動服務(wù)器域名
port: '8080', // 端口
open: true // 自動打開瀏覽器
},
mode: 'development'
};
運行
運行開發(fā)服務(wù)器筑辨，只需要執(zhí)行 npx webpack serve 命令即可。
shell.jpeg
打開 http://localhost:8080幸逆，效果如下：
serve.jpeg
增加 scripts 命令
到目前為止棍辕，我們運行了兩個命令，不妨把它們配置到package.json里:
// ...
"scripts": {
"start": "webpack serve",
"build": "webpack",
},
// ...
這樣还绘，我們運行 npm start 就會啟動本地服務(wù) http://localhost:8080, 運行 npm run build 就會把項目打包到 dist 目錄楚昭。
總結(jié)
- webpack-dev-server
- npm scripts 配置
