- 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: ['.*']}])]
webpack.dev.conf.js文件
最新推荐文章于 2022-03-07 09:35:22 发布