devServer开发服务器配置
一、下载webpack-dev-server
执行命令:cnpm i webpack-dev-server -D
二、配置webpack.config.js
// 用来拼接绝对路径
const { resolve } = require('path');
// html插件,用来处理html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 模式development|production
mode: 'development',
// 入口文件
entry: './src/index.js',
// 输出文件
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
// loader配置
module: {
rules: [
// 处理css文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
// 处理其他文件,即除了css|less|js|html之外的文件,webpack4写法
// {
// exclude: /\.(html|css|js)$/,
// loader: 'file-loader',
// options: {
// name: '[hash:10].[ext]',
// },
// }
// 处理其他文件,例如字体文件等
{
exclude: /\.(html|css|js)$/,
type: 'asset/resource',
}
],
},
// plugins配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
// 开发服务器devServer:用来实现自动化(自动化编译、自动打开浏览器、自动刷新浏览器等)
// 特点:只会在内存中编译打包,不会有任何输出
// 下载:cnpm i webpack-dev-server -D
// 启动devServer指令为:npx webpack-dev-server
// 这个是webpack4的devServer配置
// devServer: {
// // 服务器项目路径
// contentBase: resolve(__dirname, "build"),
// // 启动gzip压缩
// compress: true,
// // 开发服务器端口号
// port: 3000,
// }
// 这个是webpack5的启动配置
devServer: {
static: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 开发服务器端口号
port: 3000,
// 自动打开浏览器
open: true,
}
}
三、启动webpack-dev-server
命令行执行:npx webpack-dev-server --open 加了–open会自动打开