devServer详细配置
webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
// 模式
mode: 'development',
// 入口文件
entry: './src/index.js',
// 输出
output: {
// 文件名称(指定名称 + 目录)
filename: 'built.js',
// 输出文件目录(将来所有资源输出的公共目录)
path: resolve(__dirname, 'build'),
// 所有资源引入公共路径前缀--> 'imgs/a.jpg' --> '/imgs/a.jpg'
publicPath: '/',
// 非入口chunk的名称,就是代码分割生成的js名称
chunkFilename: 'js/[name]_chunk.js',
// 整个库向外暴露的变量名
library: '[name]',
// 将上面的变量名添加到指定对象上window、global、commonjs
libraryTarget: 'window',
},
module: {
// 需要使用的loader
rules: []
},
// 插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
// 告诉webpack哪些库不参与打包,并且使用名称也得变
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个文件打包输出,并在html中引入该资源
new AddAssetHtmlWebpackPlugin({
// 指定要打包的文件路径
filepath: resolve(__dirname, 'dll/jquery.js'),
// 输出目录
outputPath: 'dll',
// html引入的路径
publicPath: './dll',
attributes: {
nomodule: false,
},
}),
],
// 解析模块的规则
resolve: {
// 配置解析模块路径别名
alias: {
$css: resolve(__dirname, 'src/css'),
},
// 配置省略文件路径的后缀名
extensions: ['.js', '.json', '.css'],
// 告诉 webpack 解析模块是去找哪个目录
modules: [resolve(__dirname, '../../node_modules'), 'node_modules'],
},
// 开发服务器配置
devServer: {
// 服务器项目路径
contentBase: resolve(__dirname, "build"),
// 监视contentBase目录下的所有文件,一旦文件发生变化就reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 启动gzip压缩
compress: true,
// 开发服务器端口号
port: 3000,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启HMR功能
hot: true,
// 不显示启动服务器日志信息
clientLogLevel: 'none',
// 除了一些基本启动信息外,其他内容不要显示
quiet: true,
// 如果出错了,不要进行全屏提示
overlay: false,
// 服务器代理,解决开发环境下的跨域问题
proxy: {
// 一旦devServer(3000)服务器接收到/api/xxx的请求,就会把请求转发到另一个端口(3000)
'/api': {
target: 'http://localhost:5000',
// 路径重写
pathRewrite: {
'^/api': ''
}
}
},
}
}