webpack.dev.conf.js文件

最新推荐文章于 2022-03-02 04:21:11 发布

我家小薇薇

最新推荐文章于 2022-03-02 04:21:11 发布

阅读量4.1k

点赞数

分类专栏： Vue学习—项目操作篇文章标签： host port publicPath watchOptions plugins

本文链接：https://blog.csdn.net/qq_41581499/article/details/80110463

版权

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

5 篇文章 0 订阅

订阅专栏

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 : [ '.*']

}])

]