webpack.dev.conf.js文件

最新推荐文章于 2022-03-07 09:35:22 发布

原创最新推荐文章于 2022-03-07 09:35:22 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#host #port #publicPath #watchOptions #plugins

Vue学习—项目操作篇专栏收录该内容

5 篇文章

订阅专栏

本文介绍Webpack开发配置文件webpack.dev.conf.js的关键配置项，包括module.rules中的cssSourceMap功能、devServer配置项如hot模块更新、proxy代理设置等，以及常用的plugins插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack.dev.conf.js文件是在项目开发环境下使用的文件。该文件中的module对象：rules中增加了cssSourceMap的功能。
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.dev.cssSourceMap,
usePostCSS: true
})
},
devServer对象：首先在开发模式下，devServer 提供虚拟服务器，让我们进行开发和调试。其次它不是 webpack 内置插件，如果没用vue-cli搭建的话是需要手动安装的。
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot设置：hot—热模块更新作用。即修改代码模块后，保存会自动更新，页面不用刷新就呈现最新的效果。这和 webpack.HotModuleReplacementPlugin （HMR）这个插件是一样功能，但是HMR 这个插件是真正实现热模块更新的。而 devServer 里配置了 hot: true , webpack会自动添加 HMR 插件。所以模块热更新最终还是 HMR 这个插件起的作用。
contentBase：值可以为boolean string array三种类型。你要提供哪里的内容给虚拟服务器用。这里最好填绝对路径。默认情况下，它将使用当前的工作目录来提供内容。false表示不使用contentBase来指定，直接使用工作目录来提供内容。
//配置单目录
contentBase: path.join(__dirname, "public")
// 配置多目录
contentBase: [
path.join(__dirname, "public"),
path.join(__dirname, "assets")
]
compress: 如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
host：写主机名的，默认 localhost。port: 端口号，默认 8080。open:设置为true，则启动项目时自动打开浏览器。
overlay：如果为 true ，在浏览器上全屏显示编译的errors或warnings。默认 false （关闭）
overlay: config.dev.errorOverlay ? {
warnings: false, //不显示
errors: true //显示
} : false,
publicPath：配置了 publicPath后， url = '主机名' + 'publicPath配置的' +'原来的url.path'。这个其实与 output.publicPath 用法大同小异。output.publicPath 是作用于 js, css, img 。而devServer.publicPath 则作用于请求路径上的。假如配置publicPath: "/assets/"——原本路径 --> 变换后的路径http://localhost:8080/app.js --> http://localhost:8080/assets/app.js。
proxy：当你有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。如下图，假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list。'/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。changeOrigin如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。pathRewrite：重写路径。匹配 /proxy ，然后变为'' ，那么 url 最终为 http：//your_api_server.com/user/list 。
proxy: {
'/proxy': {
target: 'http://your_api_server.com',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
quiet：如果为true则终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的。
watchOptions：是一组自定义的监听模式，用来监听文件是否被改动过。
watchOptions: {
//一旦第一个文件改变，在重建之前添加一个延迟。填以毫秒为单位的数字。
aggregateTimeout: 300,
//填以毫秒为单位的数字。每隔多少时间查一下文件是否改动。不想启用也可以填false。
poll: 1000,
//如果观察许多文件系统会导致大量的CPU或内存使用量，在这里可以排除一个巨大的文件夹。
ignored: /node_modules/
}
plugins：以数组形式包住一个个 plugin 实例。每个插件实例是一个具有 apply 属性的 js 对象，每个插件都有自身 options（配置）。plugins里面的常见插件：HotModuleReplacementPlugin是热模块更换（HMR）。在应用程序运行时交换，添加或删除模块，而无需完全重新加载。NoEmitOnErrorsPlugin作用：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。HtmlWebpackPlugin --第三方插件，根据你提供的 html 模板生成 html。DefinePlugin：它的作用是定义全局常量，是常量。在模块用它定义的全局常量，那么你就不能改变它的值.
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}])
]